2019-11-29 seo達人
兩列布局的幾種方法
html結構
<div class="content">
<div class="content-left">
左側固定200px
</div>
<div class="content-right">
右側自適應
</div>
</div>
1.通過float和margin-left
/ 清除瀏覽器默認邊距 /
{
margin: 0;
padding: 0;
}
.content{
overflow: hidden;
}
/ 脫離文檔流 /
.content-left {
float: left;
width: 200px;
height: 200px;
background: red;
}
.content-right {
/ 通過margin-left將左邊位置空出 /
margin-left: 200px;
background: blue;
height: 200px;
}
2.通過 position: absolute;絕對定位
/ 清除瀏覽器默認邊距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
position: relative;
}
/ 脫離文檔流 /
.content-left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content-right {
/ 通過margin-left將左邊位置空出 /
margin-left: 200px;
background: blue;
height: 200px;
}
3.通過flex彈性布局
/ 清除瀏覽器默認邊距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
display: flex;
}
.content-left {
/ 除了width: 200px;還可以flex-basis: 200px; /
width: 200px;
height: 200px;
background: red;
}
.content-right {
/ flex:1;將剩余空間分給它 /
flex: 1;
background: blue;
height: 200px;
}
4.通過 display: table;表格布局
/ 清除瀏覽器默認邊距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
display: table;
/ 必須給父級定寬不然自適應盒子沒定寬只會由內容撐開 /
width: 100%;
}
.content-left {
display: table-cell;
width: 200px;
height: 200px;
background: red;
}
.content-right {
display: table-cell;
background: blue;
height: 200px;
}
5.通過inline-block和calc（）函數
/ 清除瀏覽器默認邊距 /
{
margin: 0;
padding: 0;
}
.content {
/ 必須加font-size=0;把inline-block默認間距去掉，
不過設置后里面文字不顯示了可以給里面塊設置font-size:20px;
或者把兩個塊之間的換行刪掉也能去掉間距/
font-size: 0;
overflow: hidden;
}
.content-left {
font-size: 20px;
display: inline-block;
width: 200px;
height: 200px;
background: red;
}
.content-right {
font-size: 20px;
display: inline-block;
background: blue;
height: 200px;
/ 注意calc里的運算符兩邊要有空格 /
width: calc(100% - 200px);
}
6.通過float和calc()函數，左右兩塊都要浮動
/ 清除瀏覽器默認邊距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
}
.content-left {
float: left;
width: 200px;
height: 200px;
background: red;
}
.content-right {
float: left;
background: blue;
height: 200px;
/ 注意calc里的運算符兩邊要有空格 /
width: calc(100% - 200px);
}
7.使用grid布局
/ 清除瀏覽器默認邊距 /
{
margin: 0;
padding: 0;
}
.content {
overflow: hidden;
display: grid;
grid-template-columns: 200px 1fr;
/ grid布局也有列等高的默認效果。需要設置: align-items: start;。 /
align-items: start;
}
.content-left {
height: 200px;
background: red;
/ grid布局還有一個值得注意的小地方和flex不同:在使用margin-left的時候，
grid布局默認是box-sizing設置的盒寬度之間的位置。
而flex則是使用兩個div的border或者padding外側之間的距離。 */
box-sizing: border-box;
grid-column: 1;
}
.content-right {
background: blue;
height: 200px;
box-sizing: border-box;
grid-column: 2;
}