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

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 /> header 中的元素。当您隐藏它时，您会发现它不再干扰您的布局。

问题是因为 <img />元素将扩展到容器的最大尺寸，即 100%。这 100% 不包括您为每边保留的 30px，因为 float 元素已从文档流中移除。声明子元素的 100% 意味着它将扩展到其父元素的宽度，而不考虑 float sibling 占用的额外空间。因此，一个解决方案是使用 CSS calc限制 .center 的宽度, 并将其也 float 到左侧:

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

或者，您可以提供 .center左右各留出 30px 的边距。 float 的 div 将忽略边距，因为它们已从文档流中取出，并且将完全适合您为它们创建的 30 像素走廊。

.center {
    margin: 0 30px;
}

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