在CSS中,我們可以使用多種方法使兩個div元素并列等高,以下是兩種常見的實現(xiàn)方式:
1、使用Flexbox:
Flexbox是一個強大的CSS3模塊,用于設(shè)計復(fù)雜的布局結(jié)構(gòu),通過Flexbox,我們可以輕松實現(xiàn)div元素的并列等高布局。
```css
.container {
display: flex;
}
.box {
flex: 1; /* flex-grow, flex-shrink, flex-basis */
background-color: #f00;
}
```
```html
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
```
2、使用CSS Grid:
CSS Grid是另一個強大的布局工具,它提供了對二維布局的完全控制,我們可以使用CSS Grid來創(chuàng)建復(fù)雜的網(wǎng)頁布局。
```css
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 分配兩個列,每列占可用空間的50% */
}
.box {
background-color: #f00;
}
```
```html
<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>
```