3个div 如何设置在同一行
时间: 2023-05-19 07:02:38 浏览: 1087
要将3个div设置在同一行,可以使用CSS的float属性或者display属性来实现。以下是两种方法的示例代码:
1. 使用float属性
HTML代码:
```
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码:
```
.container {
width: 100%;
overflow: hidden;
}
.box {
width: 30%;
height: 100px;
background-color: #ccc;
float: left;
margin-right: 2%;
}
```
2. 使用display属性
HTML代码:
```
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
```
CSS代码:
```
.container {
width: 100%;
display: flex;
}
.box {
flex: 1;
height: 100px;
background-color: #ccc;
margin-right: 2%;
}
```
以上两种方法都可以将3个div设置在同一行,具体使用哪种方法可以根据实际情况选择。