div里的元素两行
时间: 2024-02-28 11:55:05 浏览: 17
可以使用 CSS 的 flexbox 或 grid 布局来实现将 div 里的元素排成两行。具体实现方法如下:
使用 flexbox 布局:
HTML 代码:
```
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
<div class="item">元素 4</div>
</div>
```
CSS 代码:
```
.container {
display: flex;
flex-wrap: wrap;
}
.item {
width: 50%;
}
```
使用 grid 布局:
HTML 代码:
```
<div class="container">
<div class="item">元素 1</div>
<div class="item">元素 2</div>
<div class="item">元素 3</div>
<div class="item">元素 4</div>
</div>
```
CSS 代码:
```
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.item {
width: 100%;
}
```
以上两种方法都可以将 div 里的元素排成两行,具体选择哪种方法取决于你的具体需求和实际情况。