Question

我有3个div：

.left, .right {
    width: 30px;
    resize: none;
}
.left {
    float: left;
}
.right {
    float: right;
}
.center {
    max-width: 960px;
    margin: 0 auto;
}

我想要实现的是，只有中间版本在调整浏览器大小时才会调整大小。在左右div中有一个图像是设计的一部分。

当我使浏览器变小时，左右右边的div将在某一点缩小，似乎它被推入中心div。这使得中心的内容被压低。如何确保2 div将保留@ 30px？

奇怪的是，在jsfiddle它确实有用......

jsfiddle

Answer 1

问题在于标题中包含的<img />元素。隐藏它时，您可以看到它不再干扰您的布局。

问题是因为<img />元素将扩展到容器的最大大小，即100％。 100％不包括您为每一方保留的30px，因为浮动元素从文档流中取出。声明100％的子元素意味着它将扩展到其父元素的宽度，而不考虑浮动的兄弟元素占用的额外空间。因此，解决方案是使用CSS calc约束.center的宽度，并将其浮动到左侧：

.center {
    width: calc(100% - 60px);
}

或者，您可以在左侧和右侧为.center提供30px的边距。浮动的div将忽略边距，因为它们被从文档流中取出，并且完全适合您为它们创建的30px走廊。

.center {
    margin: 0 30px;
}

我通过在您提供的链接上使用Inspector进行测试和验证的两种方法。 calc()方法可能会受旧浏览器缺乏支持的影响，而margin方法适用于今天使用的大多数浏览器:)选择任何一个。

Answer 2

尝试将中心div的水平边距设置为左右div的已知宽度：

.center {
    max-width: 960px;
    margin: 0 30px;
}

使左右浮动div不可调整大小

2 个答案: