两列布局 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;
}
1111111111111111111111111111111111111111111111111111111111111111111115.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
總結
以上是生活随笔為你收集整理的两列布局 html5,CSS两列布局的N种实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux s删除第一行,Linux文本
- 下一篇： css代码优化思路,CSS代码优化方法