两列布局 html5,CSS两列布局的N种实现
原理：兩個(gè)元素都設(shè)置dislpay:inline-block，為了消除html空格的影響，父元素的font-size需要設(shè)置為0，右側(cè)自適應(yīng)元素的寬度使用calc函數(shù)計(jì)算。如果兩個(gè)元素的高度不一樣，可以給元素設(shè)置vertical-align:top調(diào)整。
缺點(diǎn)：由于父元素設(shè)置了font-size為0，子元素內(nèi)文字不會(huì)顯示
*{
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.雙浮動(dòng)
原理：兩個(gè)元素設(shè)置浮動(dòng)，右側(cè)自適應(yīng)元素寬度使用calc函數(shù)計(jì)算
缺點(diǎn)：父元素需要清除浮動(dòng)
*{
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.浮動(dòng)+margin
原理：左側(cè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度即可
缺點(diǎn)：父元素需要清除浮動(dòng)
*{
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.浮動(dòng)+BFC
原理：父元素設(shè)置overflow:hidden,左側(cè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置overflow:auto創(chuàng)建BFC
缺點(diǎn)：左側(cè)元素的內(nèi)容如果超過設(shè)定寬度會(huì)重疊到右側(cè)元素上
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
原理：父元素相對定位，左側(cè)元素絕對定位，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度
缺點(diǎn)：父元素設(shè)置了相對定位
*{
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布局
原理：父元素設(shè)置display：flex，自適應(yīng)元素設(shè)置flex：1
缺點(diǎn)：存在兼容性問題，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;
}
亞馬遜測評(píng) www.yisuping.com
總結(jié)
以上是生活随笔為你收集整理的两列布局 html5,CSS两列布局的N种实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux s删除第一行,Linux文本
- 下一篇： css代码优化思路,CSS代码优化方法