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

Question

我已经发现了几个已经被问过的SIMILAR场景,但没有一个可以解决这个特殊问题.我希望有人可以提供帮助!

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

http://kthornbloom.com/example.jpg

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

*注意2-这个目的不是为了使中间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居中,我知道有更好的方法可以做到这一点.目的是设计使用背景元素的网站,该背景元素需要是页面的整个宽度,中间除外.

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