1. table布局方式
2. table布局實際應用
效果:
/*列表布局，等空隙
*/.grid
.row
.image
style
>
head
>
<
body
>
<
h3>子容器自動平分寬度(即使設定寬度，也會進行自動等分，自適應父容器的寬度)
h3>
<
div
class
="table demo1"
>
<
div
class
="box1 table-cell"
>1
div>
<
div
class
="box2 table-cell"
>2
div>
<
div
class
="box3 table-cell"
>3
div>
div>
<
h3>垂直三行，中間自適應
h3>
<
div
class
="table demo2"
>
<
div
class
="header table-header-group"
>table header
div>
<
div
class
="main table-row"
>自動佔滿剩餘空間
div>
<
div
class
="table-footer-group"
>table footer
div>
div>
<
h3>垂直居中對齊
h3>
<
div
class
="table demo3"
>
<
div
class
="table-cell table-vm"
>
<
div
class
="center-box"
>123
div>
div>
div>
<
h3>水平居中對齊
h3>
<
div
class
="demo4"
style
="text-align:left;"
>
<
div
class
="table"
style
="margin:0 auto"
>
<
div
class
="center-box"
>123
div>
div>
div>
<
h3>水平居中對齊2
h3>
<
div
class
="demo4"
style
="text-align:left;"
>
<
span
class
="center-box table"
style
="margin:0 auto"
>123345678
span
>
div>
<
h3>列表布局，border-spacing實現等空隙
h3>
<
div
class
="grid"
>
<
div
class
="row"
>
<
div
class
="image"
>
div>
<
div
class
="image"
>
div>
<
div
class
="image"
>
div>
div>
<
div
class
="row"
>
<
div
class
="image"
>
div>
<
div
class
="image"
>
div>
<
div
class
="image"
>
div>
div>
div>
body
>
html
>
3. table布局其他應用1. 實現兩端對齊布局，使用兩個table-cell，分別text-align:left和text-align:right，由於要額外套兩個容器，所以不是較好的方法
2. 實現等高布局，具體可以參考等高布局
3. 實現兩欄自適應布局，具體可以參考自適應布局
4. table布局的注意點
1. display: table時padding會失效
2. display: table-row時margin、padding同時失效
3. display: table-cell時margin會失效，padding有效，高度有效
4. display: table-cell時float, position:absolute會失效，不用同時使用
參考：
display table 使用小結
ie8支援很多新的css display屬性值，包括與 相關的屬性值 table table row和table cell，它也是最後一款支援這些屬性值的主流瀏覽器。它標誌著複雜css布局技術的結束，同時也給了html 布局致命一擊。最終，使用css布局來製作出類似於table布局的柵格將會變得十分...
React Native flex 布局使用總結
父檢視屬性 容器屬性 flexdirection 對子布局方向的設定 row 從左到右依次排列 row reverse 從右向左依次排列 column default 從上到下排列 column reverse 從下到上排列 複製 flexwrap 定義子布局是否在父布局中多行排列 wrap 允許多...
display table的幾個用法
div css的布局已經讓 布局幾乎很少用到，除非 語義性很強的情況。display table解決了一部分需要使用 特性但又不需要 語義的情況，尤其是div css很不方便解決的問題，比如以下兩種情況 一 父元素寬度固定，想讓若干個子元素平分寬度 通常的做法是手動設定子元素的寬度，如果設定百分數不...