也就是可以像表格那样,自由地把一行拆分成多列,甚至列内也做拆分,并且每列所占的大小/比例可以精确控制
大家都有哪些实践经验可以分享?我试过使用float为left来控制,总感觉不灵活,而且容易算不准。
学习是最好的投资!
可以全瀏覽器兼容,但是需要用到一些hack解決float定位的問題,同時需要考慮清除浮動。
在很多比例(1/3、2/3是最常見的情形)不能整除的情況下,在一些情形下出現1px的誤差。
缺點同上。hack量和方案A不相上下。
額外的好處是有很多vertical-align方式可以指定,額外的壞處是很多vertical-align的屬性值對於各個瀏覽器來說都不一樣。最常見的vertical-align還是middle和baseline,頂多再加個top和bottom。
用表格當然是全瀏覽器支持的選擇。
用display:table和display:table-cell等屬性替代表格,以兼顧語義。IE8 和現代瀏覽器支持。
下麵介紹bootstrap的一套可複用的方案,這套方案是從方案A發展而來,主題思想是抽取出布局中可以複用的類。
一個常見的列拆分如下:
<p class="container"> <p class="row"> <p class="col-md-3"></p> ... </p> </p>
bootstrap的柵格係統的核心,即是使用這樣的一個三層結構,最內層使用width來分配100%的父級寬度。
對於單列的類名規則是:col-[lg/md/sm/xs]-[1~12]。詳情見bootstrap柵格選項。
中間的變量跟響應式media查詢有關,這裏不詳細解釋。最後一個值x,既等分父容器的1/12乘以x。如下:
.col-md-3 { float:left; } @media (min-width: 992px) { .col-md-3 { width: 25%; } /* 父级容器的3/12 */ }
在bootstrap柵格係統中,每個col之間都有30px間隙,如何做到等分間隙呢?見如下CSS屬性:
/* 列容器设置左右padding */ .col-md-3 { min-height: 1px; padding-right: 15px; padding-left: 15px; } /* 行容器设置负margin撑开 */ .row { margin-right: -15px; margin-left: -15px; } /* 行容器清理浮动 */ .row:before, .row:after { display: table; content: " "; } .row:after { clear: both; } /* container再补完被row挖去的15px */ .container { padding-right: 15px; padding-left: 15px; }
等等,是不是有哪裏不對?計算一下寬度:
每一个col-md-3的最终宽度 = 父容器宽度 * 25% + 15px * 2 (padding宽度) + 0 (border宽度)
怎麼會每個都1/4等分父容器呢?
還有這個屬性在作用:
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
bootstrap使用*來選取所有元素(這是我對bootstrap感到厭煩的原因,為了開發效率,犧牲選擇器效率),並強製使用border-box計算寬度,因而達到了布局上的大和諧這樣的計算公式:
父容器宽度 * 25% = 每一个col-md-3的最终宽度 + 15px * 2 (padding宽度) + 0 (border宽度)
這樣做以後,可以很方便地拿出對應的類來使用,也可以級聯,類似於row-col-row-col-row-col……
p.container h1 test p.row p.col-sm-6 p.row p.col-sm-6 img(src="holder.js/100%x180") p.col-sm-6 img(src="holder.js/100%x180") p.col-sm-6 p.row p.col-sm-3 img(src="holder.js/100%x180") p.col-sm-9 img(src="holder.js/100%x180")
(上麵用了jade的語法展示層級,和bootstrap的holder.js來補充一個img元素以展示效果)。效果如下:
bootstrap方案的適用麵是IE8 及其他現代瀏覽器,在這個方案中,主要的問題在於box-sizing屬性的兼容性,小瑕疵是百分比寬度帶來的±1px誤差的問題。
覺得可以類似 導航欄那種做法吧
http://thjiang.sinaapp.com/59
width相同,float:left
水平拆分方案A:百分比寬度 float
可以全瀏覽器兼容,但是需要用到一些hack解決float定位的問題,同時需要考慮清除浮動。
在很多比例(1/3、2/3是最常見的情形)不能整除的情況下,在一些情形下出現1px的誤差。
水平拆分方案B:百分比寬度 不帶間隙的inline-box
缺點同上。hack量和方案A不相上下。
額外的好處是有很多vertical-align方式可以指定,額外的壞處是很多vertical-align的屬性值對於各個瀏覽器來說都不一樣。最常見的vertical-align還是middle和baseline,頂多再加個top和bottom。
水平拆分方案C:表格
用表格當然是全瀏覽器支持的選擇。
水平拆分方案D:display屬性代替表格
用display:table和display:table-cell等屬性替代表格,以兼顧語義。IE8 和現代瀏覽器支持。
更多前瞻屬性……
下麵介紹bootstrap的一套可複用的方案,這套方案是從方案A發展而來,主題思想是抽取出布局中可以複用的類。
一個常見的列拆分如下:
bootstrap的柵格係統的核心,即是使用這樣的一個三層結構,最內層使用width來分配100%的父級寬度。
對於單列的類名規則是:col-[lg/md/sm/xs]-[1~12]。詳情見bootstrap柵格選項。
中間的變量跟響應式media查詢有關,這裏不詳細解釋。最後一個值x,既等分父容器的1/12乘以x。如下:
在bootstrap柵格係統中,每個col之間都有30px間隙,如何做到等分間隙呢?見如下CSS屬性:
等等,是不是有哪裏不對?計算一下寬度:
怎麼會每個都1/4等分父容器呢?
還有這個屬性在作用:
bootstrap使用*來選取所有元素(這是我對bootstrap感到厭煩的原因,為了開發效率,犧牲選擇器效率),並強製使用border-box計算寬度,因而達到了
布局上的大和諧這樣的計算公式:這樣做以後,可以很方便地拿出對應的類來使用,也可以級聯,類似於row-col-row-col-row-col……
(上麵用了jade的語法展示層級,和bootstrap的holder.js來補充一個img元素以展示效果)。效果如下:
bootstrap方案的適用麵是IE8 及其他現代瀏覽器,在這個方案中,主要的問題在於box-sizing屬性的兼容性,小瑕疵是百分比寬度帶來的±1px誤差的問題。
覺得可以類似 導航欄那種做法吧
http://thjiang.sinaapp.com/59
width相同,float:left