HTML的基本布局
- 多列布局(两列布局:左列定宽,右列自适应)
DOM文档中结构如下:
<div class="parent"> <div class="left"></div> <div class="right"></div> </div>
(1)使用float+margin实现(注意清除浮动)
.left{width:100px;float:left;} .right{margin-left:100px;}
(2)使用table实现
.parent{width:100%;display:table;table-layout:fixed;} .left{width:100px;} .left,.right{display:table-cell;}
(3)使用flex实现
.parent{display:flex;} .left{width:100px;} .right{flex:1;}
- 多列布局(两列布局:左列不定宽,右列自适应)
DOM文档中结构如下:
<div class="parent"> <div class="left"></div> <div class="right"></div> </div>
(1)使用float+overflow实现(注意清除浮动)
.left{float:left;} .right{overflow:hidden;}
(2)使用table实现
.parent{width:100%;display:table;table-layout:fixed;} .left{width:0.1%;} .left,.right{display:table-cell;}
(3)使用flex实现
.parent{display:flex;} .right{flex:1;}
- 多列布局(三列布局:两列定宽,一列自适应)
DOM文档中结构如下:
<div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
(1)使用float+margin实现(注意清除浮动)
.left,.center{width:100px;float:left;} .right{margin-left:200px;}
(2)使用table实现
.parent{width:100%;display:table;table-layout:fixed;} .left,.center{width:100px;} .left,.center,.right{display:table-cell;}
(3)使用flex实现
.parent{display:flex;} .left,.center{width:100px;} .right{flex:1;}
- 多列布局(三列布局:两边定宽,中间自适应)
DOM文档中结构如下:
<div class="parent"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>
(1)使用float+margin实现(注意清除浮动)
.left{width:100px;float:left;} .center{width:100%;float:left;margin-right:-200px;} .right{width:100px;float:right;}
(2)使用table实现
.parent{width:100%;display:table;table-layout:fixed;} .left,.right{width:100px;} .left,.center,.right{display:table-cell;}
(3)使用flex实现
.parent{display:flex;} .left,.right{width:100px;} .center{flex:1;}
- 多列布局(多列等分布局)
DOM文档中结构如下:
<div class="parent"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> </div>
(1)使用float实现(注意清除浮动)
.parent{margin-left:-20px;}/*设列与列之间间距为20px*/ .column{width:25%;float:left;padding-left:20px;}
(2)使用table实现
.parent{width:100%;display:table;table-layout:fixed;} .column{display:table-cell;}
(3)使用flex实现
.parent{display:flex;} .column+.column{margin-left:20px;} .column{flex:1;}