关于HTML的基本布局（二）

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;}