绕了一大圈，只是由于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