css - 如何连续 3 个保持外部 2 div 的固定宽度

Question

我一直在寻找并尝试各种不同的东西来让它工作，但我没有成功。

这是一个可能有助于理解的链接:http://bflydesign.no-ip.org:9876

这是我的问题:我有一个居中的 div(宽度 75%，最大 1020px)，其中包含 3 个 div:30px - 自适应宽度 - 30px。

两个较小的 30px 的 div 只包含一个背景(白色条纹)。调整大小时，我希望 center-div 适应而不是两个外部 div。现在发生的事情是外部 div 的宽度被赋予中心 div。如何保持外部 div 的固定宽度？

在这个 fiddle 中似乎没问题:http://jsfiddle.net/bflydesign/N3LZ9/

.left, .right {
min-height: 700px;
width: 30px;
min-width: 30px;
background-color: yellow;
}

Answer 1

要使 2 个图像 div 元素在调整大小时具有固定宽度，您必须将以下内容添加到您的 .center 类:

.center {
    max-width: 960px;
    margin: 0px auto;
    overflow: hidden; /* <- add this */
}

如果你想让它响应，你可以做以下事情: (所有三个 div 元素都将适当调整大小。)

.center {
    max-width: 960px;
    margin: 0px auto;
    width: 94%;
}

.left, .right {
    height: 1000px;
    min-width: 30px;
    background-image: url('cubes_bg.png');
    width: 2.94%;
}

这里的问题是您的内容不适合您的父 div，因此您的图片位于中心 div 的后面。

因此，如果您指定的宽度元素计算正确，那么父级 div 中的总宽度为 100%，则没有问题。