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

debugcn 发表于 Dev

如何收到

这是我当前的代码：

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

这是我的截图

我现在正在努力将一个约会排在最前面，另一个约会应该放在最下面

谁能帮助我实现这一目标？我被困在这里以达到这个目的

克隆的

不要使用浮点数，请使用最新的CSS以获得所需的行为。如今，您可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。