Question

有人可以帮助我吗？

我有三个div。

enter code here

中间的那个应该总是1040px。
左右两个将填满整个左侧空间。

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

以下是代码：

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

非常感谢你！

Answer 1

以下是使用table和table-cell的CSS显示属性的纯CSS选项。

DEMO： 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，将宽度设置为auto，并计算它们以填充页面宽度的其余部分（相等）。

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

最后，添加min-width到.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 - 。

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

3 个答案: