在form表单中怎么让多个div可以两列多行对齐排布
时间: 2024-03-21 14:44:12 浏览: 79
可以使用CSS的float属性和clear属性来实现多个div两列多行对齐排布。
首先,将每个div设置为宽度相同,比如设置为50%;然后将每个div设置为float:left,这样它们就可以在同一行上排列。接着,使用clear:left来确保每行都从左侧开始。
示例代码如下:
HTML代码:
```
<div class="container">
<div class="item">Content 1</div>
<div class="item">Content 2</div>
<div class="item">Content 3</div>
<div class="item">Content 4</div>
<div class="item">Content 5</div>
<div class="item">Content 6</div>
</div>
```
CSS代码:
```
.container {
width: 100%;
}
.item {
width: 50%;
float: left;
box-sizing: border-box;
padding: 10px;
border: 1px solid #ccc;
}
.item:nth-child(odd) {
clear: left;
}
```
这样,就可以让多个div实现两列多行对齐排布了。
阅读全文