所以我正在努力用 CSS 实现这个简单的概念,我也搜索了整个互联网但找不到任何东西。我想我只是措辞不正确,所以我正在尝试做的事情的视觉形象是这样的:
顶部的盒子应该放在顶部,底部的盒子应该放在底部。然后它们之间的盒子在顶部和底部应该有相等的间距。这更像是这个答案的垂直版本:https://stackoverflow.com/a/6880421/7150896
最佳答案
您可以为此使用 Flexbox
。您只需要设置 flex-direction: column
和 justify-content: space-between
。
body,
html {
margin: 0;
padding: 0;
}
.content {
display: flex;
height: 250px;
border: 1px solid black;
justify-content: space-between;
flex-direction: column;
width: 200px;
}
.box {
background: #0479D9;
height: 50px;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
关于css - 垂直对齐 div,它们之间的间距相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40567100/