在一个div大盒子里有两个div小盒子 我不想让他们挤在一起怎么办
时间: 2024-03-08 18:51:28 浏览: 165
2个div并列
您可以使用CSS中的margin属性来控制两个小盒子之间的间距,避免它们挤在一起。例如,设置其中一个盒子的margin-right属性为10px,另一个盒子的margin-left属性为10px,就可以让它们之间保持一定的间距了。
下面是示例代码:
```html
<div class="container">
<div class="box1">小盒子1</div>
<div class="box2">小盒子2</div>
</div>
<style>
.container {
width: 500px;
height: 300px;
background-color: #ccc;
display: flex;
}
.box1 {
width: 200px;
height: 100px;
background-color: #f00;
margin-right: 10px;
}
.box2 {
width: 200px;
height: 100px;
background-color: #0f0;
margin-left: 10px;
}
</style>
```
在上面的代码中,我们设置了box1的margin-right为10px,box2的margin-left为10px,这样它们之间就会有10px的间距了。同时,我们还使用了flex布局将它们放在了同一行,并让它们自适应父容器的宽度。
阅读全文