css - 使左右 float div不可调整大小

我有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格保持@ 30px？

奇怪的是，在jsfiddle中它确实可以工作...

jsfiddle

最佳答案

问题出在标题中的<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方法将适用于当今使用的大多数浏览器:)选择任何一种。