CSS4可以通過(guò)靈活的布局來(lái)實(shí)現(xiàn)兩個(gè)div并排的效果。下面我們一起來(lái)看看。

.container {
display: flex;
justify-content: space-between;
}
.box {
width: 45%;
height: 200px;
}

首先，我們給一個(gè)裝載兩個(gè)div的容器添加樣式，使用display屬性將其變成Flex布局，這樣子可以比較方便地進(jìn)行布局控制。justify-content的屬性值設(shè)置成 space-between，這樣子兩個(gè)盒子之間會(huì)有一定的間隔。

接著，我們給兩個(gè)盒子設(shè)置樣式，為了讓兩個(gè)盒子更好的并排，我們將它們的寬度都設(shè)置成了45%，兩個(gè)盒子的高度也統(tǒng)一設(shè)置成了200px。

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>

最后，在HTML中我們把裝載兩個(gè)盒子的容器、兩個(gè)盒子分別使用class進(jìn)行了樣式的調(diào)整。

這樣子，兩個(gè)div就成功地并排排列在了頁(yè)面上，更加美觀清晰。