分享
三行代码  ›  专栏  ›  技术社区  ›  how recepes

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

  •  1
  • how recepes  · 技术社区  · 1 周前

    这是我当前的代码:

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

    enter image description here

    我现在正努力把一个约会放在首位,另一个应该是bottum

    enter image description here

    有人能帮我实现这个目标吗?我被困在这里是为了得到这个

    3 回复  |  直到 1 周前
        1
  •  2
  •   cloned hyp    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>
        2
  •  2
  •   Blomqen    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>