我想把三个盒子排成一行。我正在使用 Foundation:
<div class="row">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
我希望它们是 width:32%
,第一个在最左边,第二个在中间,第三个在最右边。
我试过 flexbox 的 justify-content: space-around
但外面的盒子没有在正确的位置。我尝试了列,但中间的列向左浮动。
最佳答案
您可以使用 justify-content: space-between
来做到这一点,因为它的目的就是准确地实现您想要实现的目标:
.row {
display: flex;
justify-content: space-between;
border: 1px solid;
}
.box {
flex: 0 0 32%;
height: 20px;
background: Aquamarine;
}
<div class="row">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
关于html - 如何对齐三个相等的水平框及其周围的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47616321/