css实现多列高度不同的div等高

最新推荐文章于 2024-07-11 11:23:22 发布

开心大表哥

最新推荐文章于 2024-07-11 11:23:22 发布

阅读量8.2k

点赞数 3

分类专栏： css3

本文链接：https://blog.csdn.net/a419419/article/details/80151874

版权

css3 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。
这里写图片描述

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        font-size: 12px;
      }
      #wrap {
        overflow: hidden;
        width: 670px;
        margin: 10px auto;
        padding-bottom: 10px;
        position: relative;
      }
      .box {
        float: left;
        display: inline;
        margin-top: 10px;
        width: 190px;
        background: #c8c8c8;
        margin-left: 10px;
        padding: 10px;
        padding-bottom: 820px;
        margin-bottom: -800px;
      }
    </style>
  </head>
  <body>
    <div id="wrap">
      <div class="box">
        <h1>CSS实现三列DIV等高布局</h1>
        <p>
                      这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍一定可以帮助你解决这个头痛的问题。
这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的
          这确实是个很简单的问题，也许你也已经相当熟悉，
        </p>
      </div>
      <div class="box">
        <h1>三列DIV等高</h1>
        <p></p>
      </div>
      <div class="box">
        <h1>CSS实现但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。
          这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。
这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的
          这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。 下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。</h1>
        <p></p>
      </div>
    </div>
  </body>
</html>