Question

我已经找到了几个已经被问过的SIMILAR场景，但没有一个可以解决这个特殊问题。我希望有人可以提供帮助！

连续三个div。中间div居中，并具有设定的宽度和宽度。高度。外部的两个div必须展开以填充窗口边缘和中心div边缘之间的剩余空间。像这样：

*注意 - 我想用CSS解决它，但如果需要javascript，那就没问题了

* note2-这个目的不是以中间div为中心，我知道有更好的方法可以做到这一点。目的是设计使用背景元素的网站，该背景元素需要是页面的整个宽度，除了在中间。

Answer 1

请参阅：http://jsfiddle.net/thirtydot/xhCXq/

<强> HTML：

<div id="container">
    <div id="left">&nbsp;</div>
    <div id="mid">mid</div>
    <div id="right">&nbsp;</div>
</div>

<强> CSS：

#container {
    width: 100%;
    height: 200px;
    display: table
}
#left, #mid, #right {
    display: table-cell;
    background: #ccc;
    outline: 2px dashed blue
}
#mid {
    width: 400px;
    background: #f0f
}

我认为这很好地回答了你的问题，但这让我很担心：

这样做的目的不是为了集中中间的div，我知道有更好的这样做的方式。目的是为了使用a的网站的设计需要的背景元素页面的整个宽度，除了中间。

您确定您确实需要这样复杂的解决方案吗？也许更简单的事情：
http://jsfiddle.net/thirtydot/xhCXq/1/

Answer 2

CSS不是动态语言，您无法使用它来计算剩余空间。你可以使用jQuery。在下面的示例中，中间div将保持400px，而剩余空间将在左右div之间分割。

function calc() {
    var ww = $(window).width();
    var rem = ww - $('.div2').width();
    $('.div1, .div3').css('width', rem / 2);
}
calc();
$(window).resize(calc);

检查http://jsfiddle.net/M5Ghx/3/

处的工作示例

Answer 3

不确定这是否有帮助，但我发现了这个有趣的技巧。似乎可以在IE 8，IE 9，FireFox 3.6，FireFox 4和Safari 5（至少用于Windows）中工作。

<div name="test1" id="test1" style="position:absolute; left:0px; top:95px; width:50%; height:300px; z-index:5; background: #7BCDC9;">
This starts at the left edge, and goes all the way to the middle of the screen.
</div>
<div name="test2" id="test2" style="position:absolute; left:50%; top:95px; width:50%; height:300px; z-index:5; background: #4D3627;">
Starts in the middle, and goes all the way to the right edge.
</div>

然后，使用z-index：10，将您的居中div添加到顶部（使用您喜欢的方法）;使其“在”其他元素之上。

设置边缘div以填充剩余宽度

3 个答案:

检查http://jsfiddle.net/M5Ghx/3/