css - 如何按比例填充固定大小的div周围的空间？

Question

有人可以帮我吗？

我有三个div。

enter code here

• 中间的那个应该总是 1040px。
• 左边和右边的应该填满整个左边的空间。

调整窗口大小时，如何使它们按比例增长/缩小？

这是代码：

http://codepen.io/christophz/pen/413d31df9d33e1205b73bed3ebee1f5d

非常感谢您！

Answer 1

table这是一个使用和的 CSS 显示属性的纯 CSS 选项table-cell。

演示：http: //jsfiddle.net/audetwebdesign/a9J7D/

标记与您建议的相同。

CSS是：

.container {
    width: 100%; 
    min-width: 540px; /* you may want this... */
    margin: 0 auto;
    outline: 1px dashed blue;
    display: table;
}
.bar-light {
    width: auto;
    height: 52px;
    background-color: blue;
    display: table-cell;
}
.bar-dark {
    width: 540px;
    height: 52px;
    background-color: red;
    display: table-cell;
}

设置display: table为.container和 对于子元素，display: table-cell.

对于.bar-light，将宽度设置为自动，它们将被计算为填充页面宽度的其余部分（相等）。

在我的示例中，我将中心宽度设置为 540px，以便在小提琴中更容易看到。

最后，在没有任何内容的情况下添加一个min-widthto ，当您缩小窗口大小时，表格单元格将折叠为零宽度。.container

关于高度的注意事项

此布局将创建三个等高的列，高度将被计算为包含三个子元素中最高的一个。

Answer 2

这真的很快，所以它可能会稍微偏离，但你应该能够得到这个想法

HTML

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

CSS

div { float: left;}
.b { width: 1040px;}

jQuery

$(document).onload(resize);
$(window).resize(resize);
function resize() {
    var ww = $(window).width();
    var width = (ww-1040)/2;
    $('.a').width(width);
    $('.b').width(width);
}

Answer 3

添加一个包含 3 列的表格。在中间列中添加您的 div。为这些列指定您想要的大小，例如 10-80-10。或-80-。