//html
左邊定寬div>
右邊自適應,前端前端前端前端前端前端前端前端前端前端div>
#left
#right
#left
#right
#left
#right
class="container">
class="middle">
中間div>
class="left">
左側div>
class="right">
右側div>
div>
class="footer">
尾部div>
css:
.container
.left,
.middle,
.right
.left
.right
.middle
將父元素設定為position:relative.
左邊元素:position:absolute;
left:0;
top:0;
右邊元素:positon:absolute;
right:0;
top:0;
中間元素:margin-left:左邊元素的寬度;
margin-right:右邊元素的寬度.
3.浮動法
將左邊元素設定為左浮動:float:left;
將右邊元素設定為右浮動:float:right;
中間元素:margin-left:左邊元素的寬度;
margin-right:右邊元素的寬度.
中間元素會自動居中
注意的是:html中,中間元素必須寫在最後！否則不能居中.
4.margin負值法(雙飛翼)
id="main">
class="content">div>(content包含在main中)
div>
id="left">div>
id="right">div>
下面是css樣式：
#main
.content
#left
#right
用main將content包起來，然後浮動，content利用margin向兩邊空出距離，讓左右元素進來。左右元素都是左浮動.
當乙個元素margin-left：的距離等於他自身的距離的負值時，他就會移動到上一層，right塊元素就會移動到main的最右邊.
當乙個元素margin-left:的距離等於負100%(也就是body的長度)，他就會移動到上一層的最左邊。
兩欄布局與三欄布局
一 兩欄布局 left 左邊定寬 div right 右邊自適應,前端前端前端前端前端前端前端前端前端前端 div 1 left right2 left right3 left right二 三欄布局，中間自適應 container middle 中間 div left 左側 div right 右...
兩欄布局和三欄布局
這篇文章中主要將自己學到的兩欄布局和三欄布局的方法總結一下 兩欄布局，左側固定，右側自適應 結構 css樣式 left right如果是右側固定，左側自適應呢？html css right left注意 1 哪側固定哪個div就寫在上邊，不能顛倒順序 2 除了用float浮動外，還可以用定位的方式，...
兩欄布局和三欄布局
class class left 我是文字測試君div class right 我是文字測試君div div 給固定寬度的一方設定浮動，給自適應的一方設定100 寬度值，用浮動控制左右寬固固定或自適應 left right style ie8及以下不支援 如果是左側固定右側自適應，給父級positi...