繞了一大圈，只是由於auto是相對父元素的 —— 中欄流動佈局中的一個小問題

時間 2019-12-07

標籤一大只是由於 auto 相對元素中欄流動佈局一個問題简体版

原文原文鏈接

問題是這樣的，先上圖：

最初個人想法很簡單，三個浮動的欄，左右兩邊固定寬度，中欄寬度爲auto，可是一個用負外邊距實現的解決方案讓我很費解，方案是這樣的：css

html代碼：html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Layout Test</title>
    <link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
    <div id="main_wrapper">
        <header>
            <h1>Architecting Your App in Ext JS 4</h1>
        </header>

        <div id="threecolwrap"> <!-- 包圍所有三欄 -->

            <div id="twocolwrap"> <!-- 包圍左欄和中欄 -->
                <nav>
            <ul>
                <li>Part 1</li>
                <li>Part 2</li>
                <li>Part 3</li>
            </ul>
        </nav>

        <article>
            <div class="inner">
                <h2>Code Organization</h2>
                <p>The scalability, maintainability and flexibility of an ...</p>
            </div>
        </article>    
            </div> <!-- 結束兩欄外包裝 -->

            <aside>
                <p>We have illustrated that by using some advanced controller ... </p>
            </aside>
            
        </div> <!-- 結束三欄外包裝 -->
    

        <footer>
            <p>Application architecture is as much about providing ... </p>
        </footer>
    </div>
</body>
</html>

CSS代碼：app

* {
    margin: 0;
    padding: 0;
}

body {
    font: 1em helvetica,arial,sans-serif;
}

div#mian_wrapper {
    min-width: 600px;
    max-width: 1100px;
    /*超過最大寬度時，佈局居中*/
    margin: 0 auto;
}

header {
    padding: 5px 10px;
    background: #3f7ccf;
}

div#threecolwrap {
    /*浮動強制它包圍浮動的欄*/
    float: left;
    width: 100%;
}

div#twocolwrap {
    float: left;
    width: 100%;
    /*把右欄拉到區塊外邊距騰出的位置上*/
    margin-right: -210px;
}

nav {
    padding: 20px 0px;
    width: 150;
    float: left;
    background: #f00;
}

nav li {
    /*去掉列表項目符號*/
    list-style-type: none;
}

nav > *{margin: 0 10px}

article {
    width: auto;
    /*float: left;*/
    background: #eee;
    padding: 20px 0px;
    margin-left: 150px;
    /*在流動居中的欄右側騰出空間*/
    margin-right: 210px;
}

article > *{
    margin: 0 20px;
}
   
aside {
    padding: 20px 0px;
    float: left;
    background: #ffed53;
    width: 210;
}

aside > *{
    margin: 0 10px;
}

footer {
    clear: both;
    width: 100%;
    text-align: center;
    background: green;
}

以上方案大體是：將左中欄和左中右欄分別用div包裹，而後給twocolwrap設了-210px的右外邊距，article設了210px的右邊距，由於前面本身愚蠢的想法致使很不能理解這個方案。ide

這裏，要注意到article並無浮動，我試了一下讓它浮動，它就變成了這個樣子：佈局

原來，article的自動寬度是相對於父元素的，它會把父元素剩餘的部分所有撐滿，而左右欄是浮動的，所以並不佔據空間。flex

這樣一來，我才明白了上面那個方案要幹什麼，應該不用多說了。。。spa