CSS中設(shè)置左右兩個盒子,可以通過使用浮動(float)或者彈性布局(Flexbox)來實現(xiàn)。
使用浮動實現(xiàn)左右兩個盒子:
HTML代碼:
<div class="left-box">左側(cè)盒子內(nèi)容</div> <div class="right-box">右側(cè)盒子內(nèi)容</div>
CSS代碼:
.left-box { float: left; width: 50%; height: 300px; background-color: #f0f0f0; } .right-box { float: right; width: 50%; height: 300px; background-color: #e0e0e0; }
或者使用彈性布局實現(xiàn)左右兩個盒子:
HTML代碼:
<div class="container"> <div class="left-box">左側(cè)盒子內(nèi)容</div> <div class="right-box">右側(cè)盒子內(nèi)容</div> </div>
CSS代碼:
.container { display: flex; justify-content: space-between; } .left-box { width: 50%; height: 300px; background-color: #f0f0f0; } .right-box { width: 50%; height: 300px; background-color: #e0e0e0; }
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。