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