css 将一段置于顶部，将另一段置于按钮

Question

这是我当前的代码：

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

这是我的截图

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

谁能帮我实现这个目标？我被困在这里是为了实现这个

Answer 1

不要使用浮动，使用最新的 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>

Answer 2

像这样？

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

css 将一段置于顶部，将另一段置于按钮

css make position one paragraph to top and another to button

html

css

sass

less