Html+CSS 多列等高布局 padding补偿法《精通CSS高级WEB标准解决方案》读书笔记-CSDN博客

本文链接：https://blog.csdn.net/u010003835/article/details/51030894

今天博主看了一种多列等高布局的方法，分享给大家。

主要思想：

原理：

这种技术的关键是给每个框设置大的底内边距，然后用数值相似的负外边距消除这个高度。这会导致每个列溢出容器元素。如果把容器的overflow属性设置为hidden,列就在最高点被裁切。

知识背景:

1.background 会填充内边距 padding，而不会填充外边距 margin 。

2.通过 overflow:hidden; 根据元素最底的高度进行截取（即padding），并且div内中文字在width;height;如果没有填满会溢出到padding中。

具体步骤

1.在需要等高布局等每个元素都设置很大的正的padding-bottom, 很大的负的margin-bottom;

如：

padding-bottom: 2000px;
margin-bottom: -2000px;

2.在等高的元素外面套一层div子类的元素，设置

overflow: hidden; /*清除浮动+截断，多列等高*/

一个样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多列等高布局</title>
    <style type="text/css">
        <!--
        .container{
            min-width: 40em;    /*设置最小宽度，防止打破布局*/
            max-width: 160em;   /*设置最大宽度，防止打破布局*/
            overflow: hidden; /*清除浮动+截断，多列等高*/
            zoom:1;   /*清除浮动 IE6*/
        }
        .box{
            float: left;
            width: 20em;
            background-color: #b3d4fc;
            padding-bottom: 2000px;
            margin-bottom: -2000px;

            margin-left: 2%;            /*设置显示的样式,隔断*/
            border-radius: 1em;         /*圆角边框,由于用了截断，底边的圆角必须给图片*/
        }
        -->
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <h1>Andy Budd</h1>
            <p>Andy is the Managing Director of Clearleft. He also goes by the title of User Experience Director depending what mood he’s in.
                Andy is the author of CSS Mastery, curates the dConstruct and UX London events and is responsible for Silverbackapp, our low cost usability testing application for the Mac.
            </p>
        </div>
        <div class="box">
            <h1>Richard Rutter</h1>
            <p>
                Richard is a founding partner and the production director for
                Clearleft. He has been designing websites and web applications
                since the birth of the commercial web, over twelve years ago.
                Richard leads the user experience team at Clearleft, pioneering innovative approaches
                to designing fantastic experiences for clients and their customers.
            </p>
        </div>
        <div class="box">
            <h1>Jeremy Keith</h1>
            <p>
                Jeremy is a hugely experienced developer specialising in XHTML, CSS, Javascript and PHP-driven solutions. Jeremy is technical director at Clearleft.
            </p>
        </div>
    </div>
</body>
</html>

效果：

另附上八种多列等高的布局方式，以供参考：

http://www.jb51.net/css/68810.html

Html+CSS 多列等高布局 padding补偿法 《精通CSS高级WEB标准解决方案》读书笔记

Html+CSS 多列等高布局 padding补偿法《精通CSS高级WEB标准解决方案》读书笔记