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以下时它们转移到下一行的原因。

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

1 个答案: