求助：如何用CSS将.date容器内一个段落置顶、另一个置底？

我来帮你搞定这个垂直对齐的难题！你现在用float来布局是走偏啦——float本来是用来做水平方向的文字环绕或者并排布局的，没法实现容器内元素的上下两端对齐。咱们换用Flexbox就能轻松解决这个问题，这也是现在处理垂直布局最常用的方案。

核心思路 #

给.date容器设置Flex布局，让它的子元素（.date-top和.date-bottom）沿着垂直方向排列，并且用justify-content: space-between让它们分别顶在容器的顶部和底部。另外要注意，父容器（.col-md-3）需要有明确的高度，这样.date容器的height: 100%才能生效。

修改后的完整代码 #

HTML（注意你把date-bottom写成dote-bottom了，我帮你修正过来）

<div class="col-md-3">
  <div class="date">
    <p class="date-top">23/4/5/66</p>
    <p class="date-bottom">23/4/5/66</p>
  </div>
  <div class="text">
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
  </div>
</div>

CSS

/* 先给父容器设置高度，这里用100vh作为示例，你可以根据实际需求调整 */
.col-md-3 {
  height: 100vh;
  display: flex; /* 让.date和.text水平并排，替代原来的float */
}

.date {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  justify-content: space-between; /* 上下元素分别顶在两端 */
  height: 100%;
  margin-right: 20px; /* 给.text留点间距，可选 */
}

.text {
  flex: 1; /* 让.text占满剩余宽度，替代float: right */
}

为什么这样有效？ #

1. flex-direction: column把.date的子元素改成垂直排列，默认是水平的。
2. justify-content: space-between会让第一个子元素（.date-top）贴在容器顶部，最后一个子元素（.date-bottom）贴在容器底部，中间的空间自动留白。
3. 给.col-md-3设置display: flex，能让.date和.text更稳定地水平并排，比float布局更不容易出现塌陷或者错位的问题。

如果你的.col-md-3已经从父级继承了高度，那可以不用额外设置height: 100vh，只要保证它有明确的高度值就行。

内容的提问来源于stack exchange，提问作者user12551055