html結構
type="text/css">
/* 設定左右內邊距*/
.container
style>
class="container">
div>
複製**
在container中新增三列
type="text/css">
.container
div
.center
.left
.right
style>
class="container">
class="center">中間自定義div>
class="left">左側定寬div>
class="right">右側定寬div>
div>
複製**
將left上移至center同行顯示
.left
複製**
.left
複製**
將right上移至center同行顯示
.right
複製**
完整**
type="text/css">
.container
.container
div
.center
.left
.right
style>
class="container">
class="center">中間自適應div>
class="left">左側定寬div>
class="right">右側定寬div>
div>
複製**
html結構
class="container">
class="center">中間自適應div>
class="left">左側定寬div>
class="right">右側定寬div>
div>
複製**
.container
複製**
調整item的位置
.left
複製**
左右兩側定寬
.left
.right
複製**
center自動填充剩餘空間
.center
複製**
三列自適應布局
方法一 float margin main left right 方法二 float bfc main left right 方法三 float 負邊距 relative 這裡和兩列布局有些不同，在兩列布局中，main只需要右移給.left空出位置就可以了，所以給他乙個margin left就能解決...
多列自適應布局
多列布局是從兩列布局引申出來的，所以我們先來看兩列布局 html結構如下所示 class parent class left leftp div class right r leftp r rightp div div 這裡的left是定寬，right自適應 left right 我們需要變動一下上...
兩列自適應布局
要求 1 兩個盒子在同一行 2 右邊的盒子需要佔滿剩下的空間 3 兩個盒子不能重疊 方式一 左側欄寬度不固定 兩列自適應布局title html,body wrap header container 父元素新增偽元素樣式清除浮動，處理float的子元素無法撐開父元素高度問題 clearfix aft...