1

我已经发现了几个类似的场景已经被问过了，但没有一个能解决这个特定的问题。我希望有人能帮忙！

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

http://kthornbloom.com/example.jpg

*注意-我想用 CSS 解决它，但如果需要 javascript，那没关系

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

4

3 回答 3

8

见：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 居中，我知道有更好的方法可以做到这一点。目的是设计使用背景元素的网站，该背景元素需要是页面的整个宽度，除了中间。

你确定你真的需要这样一个复杂的解决方案吗？也许更简单的东西：http:
//jsfiddle.net/thirtydot/xhCXq/1/

于 2011-04-01T00:54:57.297 回答
3

CSS不是动态语言，你不能用它来计算剩余空间。您可以为此使用 jQuery。在下面的示例中，中间 div 将保持 400 像素，而剩余空间将在左右 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/检查工作示例

于 2011-03-31T20:49:39.527 回答
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 添加到顶部（使用您喜欢的方法）；使其“在”其他元素之上。

于 2011-06-21T02:00:47.087 回答