一文匯總 CSS 兩列布局和三列布局的具體使用
發(fā)布時間：2020-06-28 15:46:03 作者：JackySummer 
我要評論
我要評論這篇文章主要介紹了一文匯總 CSS 兩列布局和三列布局的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
前言
隨著大前端的發(fā)展，UI 框架層出不窮，讓我們前端開發(fā)對 CSS 的能力要求變得沒那么高或者沒那么嚴苛，起碼重要性是比不上 JS 編程的。但是，基礎的 CSS 依然需要我們熟練掌握，今天就來總結(jié)寫下 CSS 布局的方式。
兩列布局
左列定寬，右列自適應
float + margin 布局
html 代碼
<body> <div id="left">左列定寬</div> <div id="right">右列自適應</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">右列自適應</div> </body>
css 代碼
#left {
float: left;
width: 200px;
height: 400px;
background-color: lightblue;
}
#right {
overflow: hidden;
height: 400px;
background-color: lightgreen;
}
絕對定位布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="right">右列自適應</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">右列自適應</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">右列自適應</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">右列自適應</div>
</div>
</body>
css 代碼：
#parent {
width: 100%;
height: 400px;
display: grid;
grid-template-columns: 200px auto;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}
左列不定寬，右列自適應
左列盒子寬度隨著內(nèi)容增加或減少發(fā)生變化，右列盒子自適應
float + overflow 布局
html 代碼：
<body> <div id="left">左列不定寬</div> <div id="right">右列自適應</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">右列自適應</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">右列自適應</div>
</div>
</body>
css 代碼：
#parent {
display: grid;
grid-template-columns: auto 1fr;
height: 400px;
}
#left {
background-color: lightblue;
}
#right {
background-color: lightgreen;
}
三列布局
兩列定寬，一列自適應
float + margin 布局
html 代碼：
<body>
<div id="parent">
<div id="left">左列定寬</div>
<div id="center">中間列定寬</div>
<div id="right">右列自適應</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">右列自適應</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">右列自適應</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">右列自適應</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">右列自適應</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;
}
左右定寬，中間自適應
圣杯布局和雙飛翼布局目的都是希望先加載的是中間的部分，然后再開始加載 left 和 right 兩部分相對來說不是很重要的東西。
圣杯布局
圣杯布局：為了讓中間的內(nèi)容不被遮擋，將中間 div（或最外層父 div）設置 padding-left 和 padding-right （值等于 left 和 right 的寬度），將左右兩個 div 用相對布局 position: relative 并分別配合 left 和 right 屬性，以便左右兩欄 div 移動后不遮擋中間 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 實現(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;
}
到此這篇關于一文匯總 CSS 兩列布局和三列布局的具體使用的文章就介紹到這了,更多相關CSS 兩列布局和三列布局內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要介紹了CSS實現(xiàn)頁面兩列布局與三列布局的方法示例,包括寬度與高度的自適應的示例,需要的朋友可以參考下2016-06-23
- 這篇文章主要介紹了CSS兩列布局實現(xiàn)方式總結(jié),討論了包括absolute + margin和float + margin方式的一些實踐和問題,需要的朋友可以參考下2016-06-02
橫向兩列布局（左列固定，右列自適應）的4種CSS實現(xiàn)方式
這篇文章主要介紹了橫向兩列布局，即左列固定，右列自適應的4種CSS實現(xiàn)方式，感興趣的小伙伴們可以參考一下2016-04-27- 學習DIV+CSS網(wǎng)頁布局中的兩列布局，本文為大家分享的是DIV+CSS網(wǎng)頁布局教程的第二篇，感興趣的小伙伴們可以參考一下2016-03-15
- CSS三列布局走出HTML布局陰影，兩端固定寬度，中間自適應結(jié)構(gòu)，下面有個不錯的示例，大家可以參考下2014-02-27
- CSS兩列布局，右側(cè)固定，左側(cè)自適應寬度.2009-11-25
- 在CSS面試題中經(jīng)常會遇到CSS兩列布局的問題，下面給大家分享CSS兩列布局的實現(xiàn)方式，每種方法給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2021-07-27