三欄佈局實現方式
阿新 • • 發佈:2021-08-10
1.float+margin
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
.left { float: left; width: 300px; height: 400px; background-color: limegreen; } .right { float: right; width: 200px; height: 400px; background-color: yellowgreen; } .center { height: 400px; margin: 0 200px 0 300px; background-color: tomato; }
2.flex
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
div { display: flex; } .left{ width: 100px; height: 100px; border: 1px solid #55FFFF; } .center{ flex: 1; border: 1px solid #55FFFF; } .right{ width: 100px; height: 100px; border: 1px solid #55FFFF; }
3.position
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.wrapper { position: relative; } .left { position: absolute; left: 0; top: 0; width: 300px; height: 500px; background-color: lightgreen; } .right { position: absolute; right: 0; top: 0; width: 200px; height: 500px; background-color: lightskyblue; } .center { height: 500px; margin: 0 200px 0 300px; background-color: tomato; }
4.grid
<div class="wrapper">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
.wrapper {
display: grid;
grid-template-columns: 100px auto 100px;
grid-column-gap: 10px;
}
5.雙飛翼佈局
<div class="wrapper">
<div class="center-wrapper">
<div class="center">所有人都在努力,並不是只有你滿腹委屈</div>
</div>
<div class="left">只要在變好,慢一點也無妨</div>
<div class="right">如果你真的不在乎,又怎麼會有那麼多情緒</div>
</div>
*{
margin: 0;
padding: 0;
}
.wrapper{
height: 100px;
}
.center-wrapper,
.left,
.right{
float: left;
height: 100px;
}
.center-wrapper{
width: 100%;
background-color: #32CD32;
}
.left{
width: 100px;
margin-left: -100%;
background-color: #55FFFF;
}
.right{
width: 100px;
margin-left: -100px;
background-color: #800080;
}
.center {
margin-left: 100px;
margin-right: 100px;
height: 500px;
}
6.聖盃佈局
<div class="wrapper">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.wrapper {
height: 500px;
padding: 0 200px 0 300px; /* wrapper的container兩側空出來left和right的寬度 */
}
.center, .left, .right {
position: relative;
float: left;
}
.center {
width: 100%; /* 寬度=wrapper的container的寬度,兩側已空出left和right */
height: 500px;
background-color: tomato;
}
.left {
width: 300px;
height: 500px;
margin-left: -100%; /* 左側緊鄰container左側 */
left: -300px; /* 移至左側緊鄰wrapper最左側,右側緊鄰container左側 */
background-color: lightgreen;
}
.right {
width: 200px;
height: 500px;
margin-left: -200px; /* 右側緊鄰container右側 */
right: -200px; /* 移至右側緊鄰wrapper最右側 */
background-color: lightskyblue;
}
窘迫的日子裡,卻總是有它好玩的地方