绕了一大圈，只是因为auto是相对父元素的 —— 中栏流动布局中的一个小问题

问题是这样的，先上图：
三栏-中栏流动布局
最初我的想法很简单，三个浮动的栏，左右两边固定宽度，中栏宽度为auto，但是一个用负外边距实现的解决方案让我很费解，方案是这样的：

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代码：

* {
    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的右边距，因为前面自己愚蠢的想法导致很不能理解这个方案。

这里，要注意到article并没有浮动，我试了一下让它浮动，它就变成了这个样子：

中栏浮动

原来，article的自动宽度是相对于父元素的，它会把父元素剩余的部分全部撑满，而左右栏是浮动的，因此并不占据空间。

这样一来，我才明白了上面那个方案要干什么，应该不用多说了。。。

绕了一大圈，只是因为auto是相对父元素的 —— 中栏流动布局中的一个小问题

竹与蜻蜓

引用和评论

css揭秘笔记——结构与布局

CSS团队协作规范

前端开发工具

CSS 现在终于支持高度 auto 过渡动画了

纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

CSS 实现带tooltip的slider

盘点CSS文本两端对齐的N种方式