,可以使用CSS的flexbox布局来实现。
首先,在HTML中创建一个包含4个div的容器,例如:
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
然后,在CSS中定义容器的样式,并使用flexbox布局来对齐div:
.container {
display: flex;
justify-content: space-between;
margin: 10px;
}
.box {
width: 100px;
height: 100px;
background-color: #ccc;
}
以上代码中,.container
类设置为display: flex;
,这样容器内的元素会按照一行排列。justify-content: space-between;
属性会使得div在容器内均匀分布,并且两侧与容器的边距为10px。.box
类定义了每个div的样式,包括宽度、高度和背景颜色。
这样,就可以实现在同一行中对齐4个div,并且设置了10px的页边距。
领取专属 10元无门槛券
手把手带您无忧上云