4種實現多列布局css
摘要:
多列布局在網站應用中也是經常見到的,今天就分享4中多列布局。
display:table
<style> .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display:table; } .tableRow { display: table-row; } .tableCell { border: 1px solid red; display: table-cell; width: 33%; } </style> <div class="table" > <div class="tableRow" > <div class="tableCell" > one </div> <div class="tableCell" > two </div> <div class="tableCell" > three </div> </div> </div>
float
<style> .row { float: left; width: 33%; border: 1px solid red; } </style> <div class="row" > one </div> <div class="row" > two </div> <div class="row" > three </div>
display: inline-block
<style> .row { display: inline-block; width: 32%; border: 1px solid red; } </style> <div class="row" > one </div> <div class="row" > two </div> <div class="row" > three </div>
column-count
<style> .column { /* 設定列數 */ -moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ column-count:3; /* 設定列之間的間距 */ -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari and Chrome */ column-gap:40px; /* 設定列之間的規則 */ -moz-column-rule:4px outset #ff0000; /* Firefox */ -webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */ column-rule:4px outset #ff0000; } </style> <div class="column"></div>
小結:
以上程式碼都是在chrome上測試,如果使用請注意相容性,有任何問題都可以提問
相關文章
- CSS columns 多列布局CSS
- CSS columns多列布局瀑布流CSS
- 淺談CSS3多列布局CSSS3
- 小侃CSS3——多列布局CSSS3
- CSS-多列布局1-概述CSS
- CSS3嚐鮮(一):CSS多列布局CSSS3
- CSS-多列布局2-斷行CSS
- CSS-多列布局3-瀑布流CSS
- 前端CSS(1)之兩列布局和三列布局前端CSS
- bootstrap完美實現5列布局boot
- css實現的網頁三列布局效果程式碼例項CSS網頁
- GridLayoutManager 實現 複雜列布局
- CSS3實現多種背景效果CSSS3
- CSS3之多列布局columns詳解CSSS3
- CSS自動居中一列布局CSS
- 用margin實現兩列布局中的自適應列
- Awk 陣列排序多種實現方法陣列排序
- div css三列布局效果例項程式碼CSS
- CSS-佈局5-Calc三列布局CSS
- 【CSS】水平垂直居中的4種實現(寬高不定)CSS
- CSS多種佈局方式自我實現-水平佈局(二)CSS
- (S)CSS中實現主題樣式的4½種方式 [譯]CSS
- 精讀《磁貼布局 - 功能實現》
- 5種實現垂直居中cssCSS
- 歸併排序:陣列和連結串列的多種實現排序陣列
- CSS居中的各種實現方式CSS
- Java中查詢陣列多數元素的4種方法Java陣列
- Artisan 命令列 2種實現方式命令列
- [資料結構與演算法]佇列Queue 的多種實現資料結構演算法佇列
- 佇列的一種實現:迴圈佇列佇列
- CSS實現三列DIV等高佈局CSS
- Css實現垂直居中的幾種方法CSS
- CSS垂直居中的12種實現方式CSS
- CSS 實現垂直居中的 5 種方法CSS
- 多種跨域方式實現原理跨域
- Java併發和多執行緒2:3種方式實現陣列求和Java執行緒陣列
- Python佇列的三種佇列實現方法Python佇列
- 7種方法實現陣列去重陣列