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

I have 3 divs in the header. On the sides the width is fix, but the center div fills the remaining width.

标题中有3个div。在两侧宽度固定,但中心div填充剩余的宽度。

It works on bigger screens, but under 630px, it not works. I found this great method at http://alistapart.com/article/holygrail, but it's not works for me.

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

Here is my code, what is very simple:

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

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;
}

I spent hours with it to find the problem, but I don't know what's wrong. My online example available at http://jsfiddle.net/t6vbfxpx/2/embedded/result/

我花了几个小时来找到问题,但我不知道出了什么问题。我的在线示例可在http://jsfiddle.net/t6vbfxpx/2/embedded/result/获取

1 个解决方案

#1

I saw your example code on jsFiddle. #left and #right have a relative position which is why they shift to the next line when the width is decreased below 630px.

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