CSS實(shí)現(xiàn)兩列布局的N種方法
我要評(píng)論一、什么是兩列布局
兩列布局分為兩種，一種是左側(cè)定寬、右側(cè)自適應(yīng)，另一種是兩列都自適應(yīng)（即左側(cè)寬度由子元素決定，右側(cè)補(bǔ)齊剩余空間）。在css面試題里面屬于常考題，也是一個(gè)前端開(kāi)發(fā)工程師必須掌握的技能，下面將分別介紹實(shí)現(xiàn)方式。
二、左側(cè)定寬、右側(cè)自適應(yīng)如何實(shí)現(xiàn)？
1.雙inline-block
原理：兩個(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ì)顯示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
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;
}
</style>
</head>
<body>
<div>
<div>
<span>1234</span>
</div>
<div>
<span>1234</span>
</div>
</div>
</body>
</html>
2.雙浮動(dòng)
原理：兩個(gè)元素設(shè)置浮動(dòng)，右側(cè)自適應(yīng)元素寬度使用calc函數(shù)計(jì)算
缺點(diǎn)：父元素需要清除浮動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
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;
}
</style>
</head>
<body>
<div>
<div>
<span>
123adadadddddddddddddddddddddddddddddddddddddddd
</span>
</div>
<div></div>
</div>
</body>
</html>
原理：左側(cè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度即可
缺點(diǎn)：父元素需要清除浮動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
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;
}
</style>
</head>
<body>
<div>
<div>
<p>1234</p>
</div>
<div>
<p>1234</p>
</div>
</div>
</body>
</html>
4.浮動(dòng)+BFC
原理：父元素設(shè)置overflow:hidden,左側(cè)定寬元素浮動(dòng)，右側(cè)自適應(yīng)元素設(shè)置overflow:auto創(chuàng)建BFC
缺點(diǎn)：左側(cè)元素的內(nèi)容如果超過(guò)設(shè)定寬度會(huì)重疊到右側(cè)元素上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
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;
}
</style>
</head>
<body>
<div>
<div>111111111111111111111111</div>
<div>111111111111111111111111111111111111111111111</div>
</div>
<div></div>
</body>
</html>
5.absolute+margin-left
原理：父元素相對(duì)定位，左側(cè)元素絕對(duì)定位，右側(cè)自適應(yīng)元素設(shè)置margin-left的值大于定寬元素的寬度
缺點(diǎn)：父元素設(shè)置了相對(duì)定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
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;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>
6.flex布局
原理：父元素設(shè)置display：flex，自適應(yīng)元素設(shè)置flex：1
缺點(diǎn)：存在兼容性問(wèn)題，IE10以下不支持
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
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;
}
</style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
</body>
</html>
三、左右兩側(cè)元素都自適應(yīng)
嚴(yán)格來(lái)講，并不算兩個(gè)元素都是自適應(yīng)，只是將上面的定寬改為由子元素?fù)伍_(kāi)而已
1.浮動(dòng)+BFC
原理和上面一樣，只是左側(cè)元素的寬度沒(méi)有設(shè)置，由子元素?fù)伍_(kāi)
2.table布局
原理：父元素display:table,左側(cè)元素外圍用一個(gè)div包裹，該div設(shè)置display:table-cell，width:0.1%（保證最小寬度），左側(cè)元素內(nèi)部設(shè)置margin-right，右側(cè)元素設(shè)置display:table-cell。
缺點(diǎn)：IE7及以下不支持，當(dāng)display:table時(shí)，padding失效，父元素的line-height屬性失效，當(dāng)display:table-cell時(shí)，margin失效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.parent{
display: table;
width: 100%;
}
.box{
display: table-cell;
width: 0.1%;
}
.left{
margin-right: 20px;
background-color: red;
height: 200px;
}
.right{
display: table-cell;
background-color: blue;
height: 300px;
}
</style>
</head>
<body>
<div>
<div>
<div>126545453dddddddd453453453</div>
</div>
<div>12121</div>
</div>
</body>
</html>
3.flex布局
原理、缺點(diǎn)同上面的flex布局
4.grid布局
原理：父元素設(shè)置display：grid，grid-template-columns:auto 1fr;（這個(gè)屬性定義列寬，auto關(guān)鍵字表示由瀏覽器自己決定長(zhǎng)度。fr是一個(gè)相對(duì)尺寸單位，表示剩余空間做等分）grid-gap:20px（行間距）
缺點(diǎn)：兼容性太差，IE11都不支持，谷歌57以上才可以
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.parent{
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
.left{
background-color: red;
height: 200px;
}
.right{
height:300px;
background-color: blue;
}
</style>
</head>
<body>
<div>
<div>1111111111111111111111111</div>
<div></div>
</div>
</body>
</html>
到此這篇關(guān)于CSS實(shí)現(xiàn)兩列布局的N種方法的文章就介紹到這了,更多相關(guān)css兩列布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-06-28CSS實(shí)現(xiàn)頁(yè)面兩列布局與三列布局的方法示例
這篇文章主要介紹了CSS實(shí)現(xiàn)頁(yè)面兩列布局與三列布局的方法示例,包括寬度與高度的自適應(yīng)的示例,需要的朋友可以參考下2016-06-23- 這篇文章主要介紹了CSS兩列布局實(shí)現(xiàn)方式總結(jié),討論了包括absolute + margin和float + margin方式的一些實(shí)踐和問(wèn)題,需要的朋友可以參考下2016-06-02
橫向兩列布局（左列固定，右列自適應(yīng)）的4種CSS實(shí)現(xiàn)方式
這篇文章主要介紹了橫向兩列布局，即左列固定，右列自適應(yīng)的4種CSS實(shí)現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-04-27學(xué)習(xí)DIV+CSS網(wǎng)頁(yè)布局之兩列布局
學(xué)習(xí)DIV+CSS網(wǎng)頁(yè)布局中的兩列布局，本文為大家分享的是DIV+CSS網(wǎng)頁(yè)布局教程的第二篇，感興趣的小伙伴們可以參考一下2016-03-15- CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應(yīng)結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-02-27
- CSS兩列布局，右側(cè)固定，左側(cè)自適應(yīng)寬度.2009-11-25