在網(wǎng)頁(yè)設(shè)計(jì)中，CSS 是不可或缺的一部分，它可以讓我們用最簡(jiǎn)單的方式去大幅度的改變網(wǎng)頁(yè)的表現(xiàn)效果。本文將給大家介紹如何設(shè)置兩個(gè) div 的樣式。

<div class="wrapper">
<div class="left-box"></div>
<div class="right-box"></div>
</div>

首先我們需要?jiǎng)?chuàng)建一個(gè)兩個(gè) div 的容器，我們可以用上面的代碼完成。容器的 class 命名為 wrapper，左邊的 div 命名為 left-box，右邊的 div 命名為 right-box。

接下來(lái)我們需要給這兩個(gè) div 分別設(shè)置樣式。我們可以使用以下的 CSS 代碼去完成這個(gè)過(guò)程。

.left-box {
width: 50%;
float: left;
}
.right-box {
width: 50%;
float: right;
}

在這里我們使用 width 來(lái)定義兩個(gè) div 的寬度，并且我們使用 float 屬性將左邊的 div 向左浮動(dòng)，右邊的 div 向右浮動(dòng)。這樣我們就完成了兩個(gè) div 的設(shè)置。

如果你希望兩個(gè) div 的高度相等，我們有兩種方法可以實(shí)現(xiàn)。第一種是使用偽元素 after，第二種是使用 display：flex。

.wrapper:after {
content: "";
display: block;
height: 0;
clear: both;
}

在這里我們使用了 :after 偽元素來(lái)清除浮動(dòng)。我們?cè)?wrapper 容器中，添加一個(gè)空的 after 元素，并且給它 display:block 和 height:0。最后，在 after 元素上使用 clear 屬性清除浮動(dòng)即可。

.wrapper {
display: flex;
}

還有更簡(jiǎn)單的方法，使用 display:flex 屬性。在這里我們直接為容器添加了 display:flex 屬性，這樣子，每個(gè)子元素就會(huì)呈自動(dòng)分布，且高度自然一致。

以上就是讓兩個(gè) div 呈現(xiàn)不同樣式和相等高度的方法，希望能對(duì)您有所幫助。