CSS兩列布局總結
阿新 • • 發佈：2019-01-09
兩列布局是左邊一欄定寬，右邊一欄自適應的佈局。
HTML程式碼如下：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="2columns.css"/> </head> <body> <div class="container"> <div class="left"> <p>left</p> </div> <div class="right"> <p>right</p> </div> </div> </body> </html>
CSS有以下幾種實現方法：
1.左邊向左浮動，右邊設margin-left
html,body{
padding:0;
margin:0;
}
.left{
float:left;
width:200px;
height:300px;
background-color: red;
}
.right{
margin-left:200px;
height:350px;
background-color: blue;
}
2.左邊絕對定位，右邊設margin-left
html,body{ padding:0; margin:0; } .container{ position:relative; } .left{ position:absolute; left:0; width:200px; height:300px; background-color: red; } .right{ margin-left:200px; height:350px; background-color: blue; }
3.加一個父級flex容器，右邊flex:1
html,body{
padding:0;
margin:0;
}
.container{
display:flex;
}
.left{
width:200px;
height:300px;
background-color: red;
}
.right{
flex:1;
height:350px;
background-color: blue;
}
4.左邊向左浮動，右邊觸發BFC
html,body{ padding:0; margin:0; } .left{ float:left; width:200px; height:300px; background-color: red; } .right{ overflow:hidden; height:350px; background-color: blue; }
以上四種方式都可以呈現出下圖佈局效果：
