html中怎么让div水平排列
时间: 2024-03-23 10:36:10 浏览: 8
要让div水平排列,可以使用CSS中的display属性和float属性。
方法一:使用display:inline-block
将所有的div设置为display:inline-block,可以让它们水平排列。示例如下:
HTML代码:
```
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
```
CSS代码:
```
.container {
text-align: center; /* 将div居中 */
}
.box {
display: inline-block;
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
```
方法二:使用float属性
将所有的div设置为float:left,可以让它们水平排列。示例如下:
HTML代码:
```
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
```
CSS代码:
```
.container:after {
content: "";
display: block;
clear: both; /* 清除浮动 */
}
.box {
float: left;
width: 100px;
height: 100px;
background-color: #ccc;
margin: 10px;
}
```