【css】——三种方法实现多列等高

html:

  <section>
    <div class="item">
      Lorem, ipsum dolor sit 
      <div class="bottom"></div>
    </div>

    <div class="item">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
      <div class="bottom"></div>
    </div>

    <div class="item">
      lorem Lorem, ipsum dolor sit amet consectetur adipisicing elit. Qui dolores expedita facere, maiores totam rerum animi quisquam
      nemo, tempora recusandae 
      <div class="bottom"></div>
    </div>
  </section>

方案一：table 布局

  section {
    width: 100%;
    display: table;
    border-spacing: 20px;
  }

  .item {
    display: table-cell;
    width: 1000px;
    background: #ccc;
    margin: 4px 10px;
    text-align: center;
  }

方案二：给每个框设置大的底内边距，然后用数值相似的负外边距消除这个高度

  section {
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .item {
    float: left;
    width: 150px;
    padding-bottom: 2000px;
    margin-bottom: -1980px;
    border: 1px solid #ccc;
    margin-left: 6px;

  }
  .bottom {
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 150px;
    border-bottom: 1px solid #ccc;
  }

方案三： flex

  section {
    display: flex;
  }
  .item {
    margin-left: 6px;
    border: 1px solid #ccc;
  }

转载于:https://www.cnblogs.com/fayin/p/7449558.html