CSS中,我們可以使用display: flex
屬性將兩個盒子橫著排放,以下是一個簡單的示例:
<div style="display: flex; justify-content: space-between;"> <div style="width: 50px; height: 50px; background-color: red;"></div> <div style="width: 50px; height: 50px; background-color: blue;"></div> </div>
在這個示例中,我們創(chuàng)建了兩個盒子,分別使用div
元素表示,每個盒子的寬度和高度都設(shè)置為50px
,并且背景顏色分別為紅色和藍(lán)色,我們將這兩個盒子包含在一個父元素中,該父元素的display
屬性設(shè)置為flex
,這意味著它的子元素將按照彈性布局排列。justify-content: space-between
屬性確保兩個盒子之間有足夠的空間。
運(yùn)行這段代碼后,你將看到兩個盒子被水平放置,且兩者之間有一定的間隔,這種方法非常適合需要快速布局多個元素的情況。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請以鏈接形式注明文章出處。