等高布局

来源：互联网发布：mac air输入法怎么切换编辑：程序博客网时间：2024/06/05 04:49

等高布局： N列的高度是相同的。实现原理是通过margin-bottom和padding-bottom设置一个很大并且和相加相互取消的值。
这里写图片描述

  * {      box-sizing :border-box;    }    body {      background-color: #ddd;      text-align: center;    }    .container {      overflow: hidden;    }    .main, .left {      background-color: #fff;      margin-bottom: -100000px;      padding-bottom: 100000px;       }    .main {      margin-left: 210px;      float: left;      width: calc(100% - 210px);    }    .left {      float: left;      width: 200px;      margin-left: -100%;    }

  <h1>等高</h1>  <div class="container">    <div class="main">        <p>this is main</p>        <p>this is main</p>        <p>this is main</p>        <p>this is main</p>        <p>this is main</p>      </div>      <div class="left">left</div>    </div>

阅读全文

0 0