html **：
<div
class
="i-box clearfix"
>
<
div
class
="layout-l clearfix"
>
<
div
class
="i-left"
>
<
p>左側定寬
p>
div>
<
div
class
="i-right"
>
<
p>右側自適應
p>
div>
div>
div>
<
div
class
="i-box clearfix"
>
<
div
class
="layout-r clearfix"
>
<
div
class
="i-right"
>
<
p>右側定寬
p>
div>
<
div
class
="i-left"
>
<
p>左側自適應
p>
div>
div>
div>
<
div
class
="i-box clearfix"
>
<
div
class
="layout-both clearfix"
>
<
div
class
="i-left"
>
<
p>左側定寬
p>
div>
<
div
class
="i-right"
>
<
p>右側定寬
p>
div>
div>
div>
<
div
class
="i-box clearfix"
>
<
div
class
="layout-three clearfix"
>
<
div
class
="i-left"
>
<
p>左側定寬
p>
div>
<
div
class
="i-right"
>
<
p>右側定寬
p>
div>
<
div
class
="i-mid"
>
<
p>中間自適應
p>
div>
div>
div>
<
div
class
="i-box clearfix"
>
<
div
class
="layout-three-ll"
>
<
div
class
="i-left"
>
<
p>左側定寬
p>
div>
<
div
class
="i-mid"
>
<
p>左側定寬
p>
div>
<
div
class
="i-right"
>
<
p>右側自適應
p>
div>
div>
div>
<
div
class
="i-box clearfix"
>
<
div
class
="layout-three-rr"
>
<
div
class
="i-mid"
>
<
p>右側定寬
p>
div>
<
div
class
="i-right"
>
<
p>右側定寬
p>
div>
<
div
class
="i-left"
>
<
p>左側自適應
p>
div>
div>
div>
之前是用less寫的樣式，可能用起來會靈活一些，在這裡提供less和css兩個版本
less **：
/*@base-width 容器寬度 可以為 px 或 百分比
*/@base-width: 100%;
/** @fix-width-l 左側固定寬度 可以為 px 或 百分比
* @fix-width-r 右側固定寬度 可以為 px 或 百分比 */
@fix-width-l: 300px;
@fix-width-r: 300px;
@bg-color1: blue;
@bg-color2: red;
@bg-color3: green;
.i-box// 左側定寬, 右側自適應
.layt1(@f-width,@color1,@color2)> .i-right}
// 右側定寬, 左側自適應
.layt2(@f-width,@color1,@color2)> .i-left}
// 右側定寬, 左側定寬
.layt3(@f-width-l,@f-width-r,@color1,@color2)> .i-right}
// 左右定寬中間自適應
.layt-thr-1(@fix-width-l,@fix-width-r,@color1,@color2,@color3).i-mid.i-right}
.layt-thr-2(@fix-width1,@fix-width2,@color1,@color2,@color3).i-mid.i-right}
.layt-thr-3(@fix-width1,@fix-width2,@color1,@color2,@color3).i-mid.i-right}
.layout-l.layout-r.layout-both.layout-three.layout-three-ll.layout-three-rr
css**：
.i-box .layout-l .layout-l > .i-left .layout-l > .i-right .layout-r .layout-r > .i-right .layout-r > .i-left .layout-both .layout-both > .i-left .layout-both > .i-right .layout-three .layout-three .i-left .layout-three .i-mid .layout-three .i-right .layout-three-ll .layout-three-ll .i-left .layout-three-ll .i-mid .layout-three-ll .i-right .layout-three-rr .layout-three-rr .i-left .layout-three-rr .i-mid .layout-three-rr .i-right
html css經典布局 等高 聖杯 雙飛翼
以三欄等高布局為例 第一欄寬度30 第二欄寬度40 第三欄寬度30 幾欄就寫幾個容器，這裡需要3個容器，分別是爺爺爸爸和兒子，寬度是100 使用相對定位把爸爸向左側移動30 漏出爺爺的30 使用相對定位把兒子向左側移動40 漏出爸爸的40 在兒子裡面寫左中右三欄，給這三欄設定浮動，讓他們在同一行顯示...
HTML CSS 混合布局
charset utf 8 混合布局title type text css body top main left right foot margin 0auto 的意思就是 上下邊界為0，左右根據寬度自適應！其實就是 水平居中的意思 style head class top div class ma...
html css布局技巧
一 父元素的寬高的變化子元始終素鋪滿父元素 二 子元素位於父元素正中心 三 子元素垂直居中 四 子元素水平居中 五 固定寬高比盒子，padding bottom的取值是參照width，如果width的值是百分比，那麼參照就是父元素的width值 六 文字多於容器寬度顯示省略號 overflow hi...