css怎麼實現兩列佈局
- 青灯夜游原創
- 2021-07-22 15:33:426084瀏覽
方法：1、兩個盒子元素都設定「dislpay:inline-block」；2、兩個盒子元素設定浮動；3、左側定寬元素浮動，右側元素設定margin-left，且值大於定寬元素的寬度；4、浮動BFC；5、絕對定位margin-left等。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
一、什麼是兩列佈局
兩列佈局分為兩種，一種是左側定寬、右側自適應，另一種是兩列都自適應（即左側寬度由子元素決定，右側補齊剩餘空間）。在CSS面試題裡面屬於常考題，也是一個前端開發工程師必須掌握的技能，以下將分別介紹實作方式。
二、左側定寬、右側自適應如何實現？
1.雙inline-block
原理：兩個元素都設定dislpay:inline-block，為了消除html空格的影響，父元素的font-size需要設定為0，右側自適應元素的寬度使用calc函數計算。如果兩個元素的高度不一樣，可以為元素設定vertical-align:top調整。
缺點：由於父元素設定了font-size為0，子元素內文字不會顯示
<!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 class="box">
<div class="left">
<span>1234</span>
</div>
<div class="right">
<span>1234</span>
</div>
</div>
</body>
</html>#2.雙重浮動
原理：兩個元素設定浮動，右側自適應元素寬度使用calc函數計算
# 缺點：缺點元素需要清除浮動
<!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 class="box">
<div class="left">
<span>
123adadadddddddddddddddddddddddddddddddddddddddd
</span>
</div>
<div class="right"></div>
</div>
</body>
</html>3.浮動margin
原理：左側定寬元素浮動，右側自適應元素設定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 class="box">
<div class="left">
<p>1234</p>
</div>
<div class="right">
<p>1234</p>
</div>
</div>
</body>
</html>#4.浮動BFC
原理：父元素設定overflow:hidden,左側定寬元素浮動，右側自適應元素設定overflow:auto建立BFC
缺點：左側元素的內容如果超過設定寬度會重疊到右側元素上
<!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 class="box">
<div class="left">111111111111111111111111</div>
<div class="right">111111111111111111111111111111111111111111111</div>
</div>
<div class="right"></div>
</body>
</html>5.absolute margin- left
原理：父元素相對定位，左側元素絕對定位，右側自適應元素設定margin-left的值大於定寬元素的寬度
缺點：父元素設定了相對定位
<!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 class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>6.flex佈局
# 原理：父元素設定display：flex，自適應元素設定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 class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>#<!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 class="parent">
<div class="box">
<div class="left">126545453dddddddd453453453</div>
</div>
<div class="right">12121</div>
</div>
</body>
</html> 三、左右兩側元素都自適應
嚴格來講，並不算兩個元素都是自適應，只是將上面的定寬改為由子元素撐開而已1.浮動BFC
原理和上面一樣，只是左側元素的寬度沒有設置，由子元素撐開2.table佈局
原則：父元素display:table,左側元素外圍用一個div包裹，該div設定display:table-cell，width :0.1%（保證最小寬度），左側元素內部設定margin-right，右側元素設定display:table-cell。 缺點：IE7及以下不支持，當display:table時，padding失效，父元素的line-height屬性失效，當display:table-cell時，margin失效。<!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 class="parent">
<div class="left">1111111111111111111111111</div>
<div class="right"></div>
</div>
</body>
</html>3.flex佈局
# 原理、缺點同上面的flex佈局
#4.grid佈局
原理：父元素設定display：grid，grid-template-columns:auto 1fr;（這個屬性定義列寬，auto關鍵字表示由瀏覽器自己決定長度。fr是一個相對尺寸單位，表示剩餘空間做等分）grid-gap:20px（行間距）
缺點：相容性太差，IE11都不支持，Google57以上才可以
rrreee（學習影片分享：css影片教學
）###以上是css怎麼實現兩列佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn