html - 一栏左一居中

Question

我一直在尝试制作一个页面，该页面在左侧包含一列 330px 宽度，然后是另一列以页面剩余宽度为中心的 670px 最大宽度。当然，如果屏幕宽度太小而无法容纳 1000px，第二列将被调整大小。我怎么做？

这是我当前的 CSS 代码：

#left {
   float:left;
   width:330px;
}
#right {
   ???
}

Answer 1

您可以轻松地做到这一点，而无需calc或其他讨厌的过分现代的黑客攻击。以下甚至应该在 IE7 中正常工作，不确定 IE6 及其对margin:0 auto嵌套元素的尊重，但甚至可以工作：

HTML

<div id="layout">
    <div id="leftcolumn">
        Test
    </div>
    <div id="remainder">
        <div id="rightcolumn">
            Test
        </div>
    </div>    
</div>

CSS

div {
    color:white;
    height:400px;  
    text-align:center;
}
#leftcolumn {
    background:red;
    float:left;
    width:120px;
}
#remainder {
    margin-left:120px;
}
#rightcolumn {   
    width:100%;
    margin:0 auto;
    max-width:300px;
    background:green;
}

小提琴提供。