css 将一个段落放在顶部，另一个放在按钮上答案

【问题标题】：css make position one paragraph to top and another to buttoncss 将一个段落放在顶部，另一个放在按钮上
【发布时间】：2020-10-19 17:50:15
【问题描述】：

这是我当前的代码：

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

            <p class="dote-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：

.date {
    float: left;
    height: 100%;
}

.text {
    float: right;
}

这是我的截图

我现在正努力将一个日期放在顶部，而另一个日期应该放在底部

谁能帮我实现这个目标？我被困在这里实现这一目标

【问题讨论】：

标签： html css sass less

【解决方案1】：

像这样？

.date {
    float: left;
    height: 100%;
}

.text {
    float: right;
}
.date-top {
  position:fixed;
  top:0;
}
.date-bottom {
  position:fixed;
  bottom:0;
}

<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>

【讨论】：

如果需要固定位置则可以。另一种方法如此赞成。
对不起，不，您的解决方案是错误的，因为它已修复

【解决方案2】：

不要使用浮点数，使用最新的 CSS 来获得所需的行为。如今you can use flexbox 实现了这样的目标。

.col-md-3 {
display: flex
}

.date {
 display: flex;
 flex-flow: column;
 justify-content: space-between;
 
 margin-right: 10px; /* just to have some space, you can also use flexbox to space your .date and .text divs. */
}

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

    <p class="dote-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>

【讨论】：

这是使用 flex 布局的最佳方法。赞成的答案。