两列布局 html5,CSS两列布局的N种实现

原理：两个元素都设置dislpay:inline-block，为了消除html空格的影响，父元素的font-size需要设置为0，右侧自适应元素的宽度使用calc函数计算。如果两个元素的高度不一样，可以给元素设置vertical-align:top调整。

缺点：由于父元素设置了font-size为0，子元素内文字不会显示

*{

padding: 0;

margin: 0;

}

.box{

height: 600px;

width: 100%;

font-size:0;

}

.left{

display: inline-block;

width: 100px;

height: 200px;

background-color: red;

vertical-align: top;

}

.right{

display: inline-block;

width: calc(100% - 100px);

height: 400px;

background-color: blue;

vertical-align: top;

}

1234

1234

2.双浮动

原理：两个元素设置浮动，右侧自适应元素宽度使用calc函数计算

缺点：父元素需要清除浮动

*{

padding: 0;

margin: 0;

}

.box{

height: 600px;

width: 100%;

}

.left{

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right{

float: left;

width: calc(100% - 100px);

height: 400px;

background-color: blue;

}

123adadadddddddddddddddddddddddddddddddddddddddd

3.浮动+margin

原理：左侧定宽元素浮动，右侧自适应元素设置margin-left的值大于定宽元素的宽度即可

缺点：父元素需要清除浮动

*{

padding: 0;

margin: 0;

}

.box{

height: 600px;

width: 100%;

}

.left{

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right{

margin-left: 100px;

height: 400px;

background-color: blue;

}

1234

1234

4.浮动+BFC

原理：父元素设置overflow:hidden,左侧定宽元素浮动，右侧自适应元素设置overflow:auto创建BFC

缺点：左侧元素的内容如果超过设定宽度会重叠到右侧元素上

1

*{

padding: 0;

margin: 0;

}

.box{

height: 600px;

width: 100%;

overflow: hidden;

}

.left{

float: left;

width: 100px;

height: 200px;

background-color: red;

}

.right{

overflow: auto;

height: 400px;

background-color: blue;

}

111111111111111111111111

111111111111111111111111111111111111111111111

5.absolute+margin-left

原理：父元素相对定位，左侧元素绝对定位，右侧自适应元素设置margin-left的值大于定宽元素的宽度

缺点：父元素设置了相对定位

*{

padding: 0;

margin: 0;

}

.box{

height: 600px;

width: 100%;

position: relative;

}

.left{

position: absolute;

width: 100px;

height: 200px;

background-color: red;

}

.right{

margin-left: 100px;

height: 400px;

background-color: blue;

}

6.flex布局

原理：父元素设置display：flex，自适应元素设置flex：1

缺点：存在兼容性问题，IE10以下不支持

*{

padding: 0;

margin: 0;

}

.box{

height: 600px;

width: 100%;

display: flex;

}

.left{

width: 100px;

height: 200px;

background-color: red;

}

.right{

flex: 1;

height: 400px;

background-color: blue;

}

亚马逊测评 www.yisuping.com