前幾天看到我們的ui稿，要實現左側固定樹結構，右側自適應。想著自己寫過幾次但是每次都會忘記，在這裡做個筆記。
第一種方法：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>title
title
>
<
script
src=""
>
script
>
<
style
>
#wrap
#wrap>div
#sidebar
#contend
style
>
head
>
<
body
>
<
div
id="wrap"
>
<
div
id="sidebar"
>
div>
<
div
id="contend"
>
div>
div>
body
>
<
script
>
script
>
html
>
這種布局主要技術就是讓div轉變成table元素，讓div標籤擁有table，td標籤的特點。
第二種方法
doctype
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>document
title
>
<
script
src=""
>
script
>
<
style
rel="stylesheet"
type
="text/css"
>
html,body
.one
.two
style
>
head
>
<
body
>
<
div
class
="one"
>
div>
<
div
class
="two"
>
div>
body
>
<
script
>
settimeout(
function
() ,
500)
},500)
script
>
html
>
第三種方法：
以後看到了，在追加。。。。。。如過有讀者測試了這兩個方法，請告知相容問題，和其他問題。多謝。
網頁布局 左側固定，右側自適應
第一種方法 採用絕對定位 bfc overflow auto doctype html html lang en head meta charset utf 8 title document title style left right style head body div class left ...
左側固定 右側自適應
左側浮動，右側margin left值為左側寬即可。由於左側浮動，左側盒子脫標，右側仍在標準文件流，右側盒子寬度是剩下的寬度，效果為右側自適應。右側內容可居中，常規用法即可。需注意的是左側浮動，右側不能繼續浮動。如果兩邊盒子都浮動，由於右側盒子寬度不固定，預設為內容撐開寬度。若浮動，極有可能在第二排...
css布局之左側固定右側自適應布局
1.固定高度 左側固定 右側欄自適應寬度 title style type text css mainbody leftcol rightcol style head body divid mainbody divid leftcol div divid rightcol div div body ...