html - 固定和灵活的宽度 div 彼此相邻

Question

我在页眉中有 3 个 div。两侧的宽度是固定的，但中心的 div 填充了剩余的宽度。

它适用于更大的屏幕，但在 630px 下，它不起作用。我在 http://alistapart.com/article/holygrail 找到了这个很棒的方法，但这对我不起作用。

这是我的代码，非常简单:

HTML

<div id="header">
    <div id="content">CENTER</div>
    <div id="left">LEFT</div>
    <div id="right">RIGHT</div>
</div>

CSS

#header {
    padding:0 150px 0 250px;
}

#left {
    position:relative;
    float:left;
    margin-left:-100%;
    background:red;
    width:250px;
    right:250px;
}

#right {
    position:relative;
    float:left;
    margin-right:-100%;
    width:150px;
    background:pink;
}

#content {
    width:100%;
    background:green;
    position:relative;
    float:left;
}

我花了好几个小时才找到问题所在，但我不知道哪里出了问题。我的在线示例位于 http://jsfiddle.net/t6vbfxpx/2/embedded/result/

Answer 1

我在 jsFiddle 上看到了您的示例代码。 #left 和 #right 有一个相对位置，这就是当宽度减小到 630px 以下时它们会移动到下一行的原因。