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的背景的作法，使人拍案叫絕。