提问者:小点点

css使一个段落位于顶部,另一个段落位于按钮上


这是我当前的代码:

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

我现在正在努力定位一个日期的顶部和另一个应该是底部

有人能帮我实现这一点吗? 我被困在这里接受这个


共2个答案

匿名用户

不要使用浮动,使用最新的CSS来获得所需的行为。 如今,您可以使用flexbox实现类似的功能。

null

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

匿名用户

像这样?

null

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