一文匯總 CSS 兩列布局和三列布局的具體使用
發(fā)布時(shí)間：2020-06-28 15:46:03 作者：JackySummer 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
前言
隨著大前端的發(fā)展，UI 框架層出不窮，讓我們前端開(kāi)發(fā)對(duì) CSS 的能力要求變得沒(méi)那么高或者沒(méi)那么嚴(yán)苛，起碼重要性是比不上 JS 編程的。但是，基礎(chǔ)的 CSS 依然需要我們熟練掌握，今天就來(lái)總結(jié)寫下 CSS 布局的方式。
兩列布局
左列定寬，右列自適應(yīng)
float + margin 布局
html 代碼
<body> <div id="left">左列定寬</div> <div id="right">右列自適應(yīng)</div> </body>
css 代碼：
#left {
float: left;
width: 200px;
height: 400px;
background-color: lightblue;
}
#right {
margin-left: 200px; /* 大于或等于左列的寬度 */
height: 400px;
background-color: lightgreen;
}
float + overflow 布局
html 代碼
<body> <div id="left">左列定寬</div> <div id="right">右列自適應(yīng)</div> </body>
css 代碼
#left {
float: left;
width: 200px;
height: 400px;
background-color: lightblue;
}
#right {
overflow: hidden;
height: 400px;
background-color: lightgreen;
}
絕對(duì)定位布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
position: relative;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 400px;
background-color: lightblue;
}
#right {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 400px;
background-color: lightgreen;
}
table 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
width: 100%;
height: 400px;
display: table;
}
#left,
#right {
display: table-cell;
}
#left {
width: 200px;
background-color: lightblue;
}
#right {
background-color: lightgreen;
}
flex 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
width: 100%;
height: 400px;
display: flex;
}
#left {
width: 200px;
background-color: lightblue;
}
#right {
flex: 1;
background-color: lightgreen;
}
grid 網(wǎng)格布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
width: 100%;
height: 400px;
display: grid;
grid-template-columns: 200px auto;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}
左列不定寬，右列自適應(yīng)
左列盒子寬度隨著內(nèi)容增加或減少發(fā)生變化，右列盒子自適應(yīng)
float + overflow 布局
html 代碼：
<body> <div id="left">左列不定寬</div> <div id="right">右列自適應(yīng)</div> </body>
css 代碼：
#left {
float: left;
height: 400px;
background-color: lightblue;
}
#right {
overflow: hidden;
height: 400px;
background-color: lightgreen;
}
flex 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列不定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
display: flex;
height: 400px;
}
#left {
background-color: lightblue;
}
#right {
flex: 1;
background-color: lightgreen;
}
grid 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列不定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
display: grid;
grid-template-columns: auto 1fr;
height: 400px;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}
三列布局
兩列定寬，一列自適應(yīng)
float + margin 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="center">中間列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
height: 400px;
}
#left {
float: left;
width: 100px;
height: 400px;
background-color: lightblue;
}
#center {
float: left;
width: 200px;
height: 400px;
background-color: lightgrey;
}
#right {
margin-left: 300px; /* 左列的寬度 + 中間列的寬度 */
height: 400px;
background-color: lightgreen;
}
float + overflow 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="center">中間列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
height: 400px;
}
#left {
float: left;
width: 100px;
height: 400px;
background-color: lightblue;
}
#center {
float: left;
width: 200px;
height: 400px;
background-color: lightgrey;
}
#right {
overflow: hidden;
height: 400px;
background-color: lightgreen;
}
table 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="center">中間列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
display: table;
width: 100%;
height: 400px;
}
#left {
display: table-cell;
width: 100px;
background-color: lightblue;
}
#center {
display: table-cell;
width: 200px;
background-color: lightgrey;
}
#right {
display: table-cell;
background-color: lightgreen;
}
flex 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="center">中間列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼：
#parent {
display: flex;
width: 100%;
height: 400px;
}
#left {
width: 100px;
background-color: lightblue;
}
#center {
width: 200px;
background-color: lightgrey;
}
#right {
flex: 1;
background-color: lightgreen;
}
grid 布局
html 代碼
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="center">中間列定寬</div>
<div id="right">右列自適應(yīng)</div>
</div>
</body>
css 代碼
#parent {
display: grid;
grid-template-columns: 100px 200px auto;
width: 100%;
height: 400px;
}
#left {
background-color: lightblue;
}
#center {
background-color: lightgrey;
}
#right {
background-color: lightgreen;
}
左右定寬，中間自適應(yīng)
圣杯布局和雙飛翼布局目的都是希望先加載的是中間的部分，然后再開(kāi)始加載 left 和 right 兩部分相對(duì)來(lái)說(shuō)不是很重要的東西。
圣杯布局
圣杯布局：為了讓中間的內(nèi)容不被遮擋，將中間 div（或最外層父 div）設(shè)置 padding-left 和 padding-right （值等于 left 和 right 的寬度），將左右兩個(gè) div 用相對(duì)布局 position: relative 并分別配合 left 和 right 屬性，以便左右兩欄 div 移動(dòng)后不遮擋中間 div。
html 代碼：
<body>
<div id="parent">
<div id="center">中間列</div>
<div id="left">左列</div>
<div id="right">右列</div>
</div>
</body>
css 代碼：
#parent {
height: 400px;
padding: 0 200px;
overflow: hidden;
}
#left,
#right {
float: left;
width: 200px;
height: 100%;
position: relative;
background-color: lightblue;
}
#left {
margin-left: -100%; /* 使 #left 上去一行 */
left: -200px;
}
#right {
right: -200px;
margin-left: -200px; /* 使 #right 上去一行 */
}
#center {
float: left;
width: 100%;
height: 100%;
background-color: lightgrey;
}
雙飛翼布局
雙飛翼布局，為了中間 div 內(nèi)容不被遮擋，直接在中間 div 內(nèi)部創(chuàng)建子 div 用于放置內(nèi)容，在該子 div 里用 margin-left 和 margin-right 為左右兩欄 div 留出位置。
html 代碼：
<body>
<div id="parent">
<div id="center">
<div id="center-inside">中間列</div>
</div>
<div id="left">左列</div>
<div id="right">右列</div>
</div>
</body>
css 代碼：
#left,
#right {
float: left;
width: 200px;
height: 400px;
background-color: lightblue;
}
#left {
margin-left: -100%; /* 使 #left 上去一行 */
}
#right {
margin-left: -200px; /* 使 #right 上去一行 */
}
#center {
float: left;
width: 100%;
height: 400px;
background-color: lightgrey;
}
#center-inside {
height: 100%;
margin: 0 200px;
}
flex 實(shí)現(xiàn)
html 代碼：
<body>
<div id="parent">
<div id="center">中間列</div>
<div id="left">左列</div>
<div id="right">右列</div>
</div>
</body>
css 代碼：
#parent {
display: flex;
}
#left,
#right {
flex: 0 0 200px;
height: 400px;
background-color: lightblue;
}
#left {
order: -1; /* 讓 #left 居于左側(cè) */
}
#center {
flex: 1;
height: 400px;
background-color: lightgrey;
}
到此這篇關(guān)于一文匯總 CSS 兩列布局和三列布局的具體使用的文章就介紹到這了,更多相關(guān)CSS 兩列布局和三列布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS實(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
- 在CSS面試題中經(jīng)常會(huì)遇到CSS兩列布局的問(wèn)題，下面給大家分享CSS兩列布局的實(shí)現(xiàn)方式，每種方法給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-07-27