溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“css如何實現兩列布局”，在日常操作中，相信很多人在css如何實現兩列布局問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css如何實現兩列布局”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
方法：1、兩個盒子元素都設置“dislpay:inline-block”；2、兩個盒子元素設置浮動；3、左側定寬元素浮動，右側元素設置margin-left，且值大于定寬元素的寬度；4、浮動+BFC；5、絕對定位+margin-left等。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
兩列布局分為兩種，一種是左側定寬、右側自適應，另一種是兩列都自適應（即左側寬度由子元素決定，右側補齊剩余空間）。在CSS面試題里面屬于常考題，也是一個前端開發工程師必須掌握的技能，下面將分別介紹實現方式。
原理：兩個元素都設置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>原理：兩個元素設置浮動，右側自適應元素寬度使用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>原理：左側定寬元素浮動，右側自適應元素設置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>原理：父元素設置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>原理：父元素相對定位，左側元素絕對定位，右側自適應元素設置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>原理：父元素設置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>嚴格來講，并不算兩個元素都是自適應，只是將上面的定寬改為由子元素撐開而已
原理和上面一樣，只是左側元素的寬度沒有設置，由子元素撐開
原理：父元素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: 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>原理、缺點同上面的flex布局
原理：父元素設置display：grid，grid-template-columns:auto 1fr;（這個屬性定義列寬，auto關鍵字表示由瀏覽器自己決定長度。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 class="parent">
<div class="left">1111111111111111111111111</div>
<div class="right"></div>
</div>
</body>
</html>到此，關于“css如何實現兩列布局”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
