HTML 应用多列浮动等高处理

最新推荐文章于 2021-12-05 19:02:07 发布

weixin_33892359

最新推荐文章于 2021-12-05 19:02:07 发布

阅读量147

点赞数

原文链接：https://my.oschina.net/honchy/blog/358246

版权

为什么80%的码农都做不了架构师？>>>

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

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

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

code；

<!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>

效果：

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

这个时候再看，若是能够把红色的背景按比例分层三种颜色就好了。然后和文字刚好配上，就达到想要的效果了。

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

代码如下：

<!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>

效果如下：

然后，看到了，其实是各个背景层的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的背景的做法，令人拍案叫绝。

转载于:https://my.oschina.net/honchy/blog/358246