HTML 应用多列浮动等高处理

时间 2019-11-16

标签 html 应用多列浮动等高处理栏目 HTML 繁體版

原文原文链接

来自 http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks 的解决方案，作了简化处理，看原文更明白了。随时E文，不过做者并无使用比较复杂的句子。css

直觉利用浮动写一个三列布局：效果以下，这就是背景。html

基于此提供了一个解决方案，来使得三列均按照最高的内容的那个一列的高度为高度。所以问题的关键是为三列的高度提供一个高度的参考点。能够为三列增长一个容器试试看。布局

code；this

<!DocType html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
            html ,body{
                background-color:#f6f6f6;
            }
            .container{
                float:left;
                background-color:#c00;
            }
            .left{
                width:25%;
                float:left;
                background-color:#abcdef;
            }
            .center{
                width:50%;
                float:left;
                background-color:#fedcba;
            }
            .right{
                width:25%;
                float:right;
                background-color:#defabc;
            }
        </style>
    </head>
    <body>
        <div class="container">        
            <div class="left">In the example above we have three columns each with a different amount of content. You will notice that the problem is the column background colours stretch only as far down as the height of the content they contain. This is the problem we are trying to solve. How can we make all columns the same height? </div>
            <div class="center">The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. The way we do this is to use two divs for each column instead of one. The first div will be used to hold the content and the other will be used as the background colour. This separation gives us individual control over these elements plus we can put them together in a more useful way. This will all become clear shortly.</div>
            <div class="right">This is the central principle behind this equal column height method. The only way to make the height of a div equal to the tallest column is if that div contains all the columns. So to explain this another way, by placing the columns.</div>
        </div>
    </body>
</html>

效果：code

这个时候，高度已经一致了，就是背景差一些。咱们再弄个背景层。那么大概是这个样子来拼这个页面的：htm

这个时候再看，如果可以把红色的背景按比例分层三种颜色就行了。而后和文字恰好配上，就达到想要的效果了。blog

三种颜色，那么应该须要三个div，并且div应该高度和内容最高的列高度一致。基于上面已经得出的结论，那么设置三个嵌套的div便可。three

代码以下：ip

<!DocType html>
<html>
    <head>
        <meta charset="UTF-8" />
        <style type="text/css">
            html ,body{
                background-color:#f6f6f6;
            }
            .left{
                width:25%;
                float:left;
            }
            .center{
                width:50%;
                float:left;
            }
            .right{
                width:25%;
                float:right;
            }
            .right-bg{
                position:relative;
                overflow:hidden;
                float:left;
                background-color:#abcdef;
            }
            .mid-bg{
                float:left;
                background-color:#defabc;
                position:relative;
                right:25%;
            }
            .left-bg{
                float:left;
                background-color:#fedcba;
                position:relative;
                right:50%;
            }
        </style>
    </head>
    <body>
        <div class="right-bg">
            <div class="mid-bg">
                <div class="left-bg">
                    <div class="left">In the example above we have three columns each with a different amount of content. You will notice that the problem is the column background colours stretch only as far down as the height of the content they contain. This is the problem we are trying to solve. How can we make all columns the same height? </div>
                    <div class="center">The first step to solving the equal height problem is to break it into smaller pieces that can be solved separately. The way we do this is to use two divs for each column instead of one. The first div will be used to hold the content and the other will be used as the background colour. This separation gives us individual control over these elements plus we can put them together in a more useful way. This will all become clear shortly.</div>
                    <div class="right">This is the central principle behind this equal column height method. The only way to make the height of a div equal to the tallest column is if that div contains all the columns. So to explain this another way, by placing the columns.</div>
                </div>
            </div>
        </div>
    </body>
</html>

效果以下：ci

而后，看到了，实际上是各个背景层的div 以此向左移动了，那么只要把文字相应的位置补偿回来就OK了。

.left{
                width:25%;
                float:left;

                position:relative;
                left:75%;
            }
            .center{
                width:50%;
                float:left;

                position:relative;
                left:75%;
            }
            .right{
                width:25%;
                float:right;

                position:relative;
                left:75%;
            }

改动下js，便可看到效果了。

原文中有关于增长padding的部分是如何作的，以及做者的2列，多列的作法。点击去吧。

这个思路实在是太牛了。对js的定位和高度的理解出神入化，尤为是使用多层div的背景的作法，使人拍案叫绝。

HTML 应用 多列浮动等高处理

HTML 应用多列浮动等高处理