css - 我怎样才能做到这一点，当页面宽度减小时，它最终会停止调整？

Question

这有点难以解释……以任何主要网站为例，CNN.com、Weather.com 等，当您从左侧或右侧拉动浏览器以减小窗口宽度时，页面会移动、调整以保持标题居中和类似的东西......

但是，过了一点之后，页面停止调整，因为再调整，标题将无法适应，超链接将重叠到下一行，看起来很糟糕......

使这种情况发生的代码是什么？我猜是“最小宽度”，但是我没有运气。

Answer 1

这应该有效。我用黄色边框概述了您的内容将去哪里，这样您就可以看到它的样子。查看示例以查看该布局是否是您想要的，如果是，请查看代码。

例子

代码

告诉我你的想法或告诉我这是否不适合你。

如果您注意到，令人惊讶的是不需要最小宽度。

编辑：

这是您需要做的添加填充。您只需添加内部包装并在它们上放置填充。我添加了内容（只是为了显示内容的外观）并去掉 div 的高度，以便它们只有高度自动（适合它们的内容）。是的，现在它可能现在标记太多，以至于它可能会令人困惑，但它说明它现在有填充。

演示

Answer 2

通过 CSS 你拥有min-width和max-width 属性。

最大宽度：http ://www.w3schools.com/cssref/pr_dim_max-width.asp

此属性将表示width元素支持的最大值。因此，无论它包含什么强制大小或内容，该值都将是该元素宽度可以达到的最大大小。

最小宽度：http ://www.w3schools.com/cssref/pr_dim_min-width.asp

此属性将表示width元素支持的最小值。因此，无论调整大小或强制减小该元素的大小，该值都将是该元素宽度可以达到的最小大小。

---

这些属性通常用于控制案例中的元素大小，就像您的一样，确保用户获得最佳的视觉体验。

有关这些属性的更多详细信息以及使用它们的好方法：http: //quirksmode.org/css/css2/width.html

Answer 3

默认情况下，块级容器的宽度将是其父级的 100%，除非另有定义。您所指的效果是通过显式设置容器（例如 DIV）的像素宽度，然后将该容器居中来实现的。浏览器将在该容器的左侧和右侧添加相等的边距，只要窗口大于您指定的宽度，它就会保持在中心。当浏览器窗口小于您指定的宽度时，容器将锚定到窗口的左边缘，并且会出现一个水平滚动条，允许您向右滚动。

对于 CNN.com，对于内容，有一个包装器 DIV，它没有类或 ID，但属性“align=center”。该容器内部是一个 id="cnn_maincntnr" 的 DIV。该容器的宽度为：1000px，在 hplib-min.css 中定义。

Answer 4

它实际上是“最小宽度”！

对于那些将来想知道同样事情的人，只需在 CSS 文件中为某些元素分配标签“最小宽度”，然后是 1200 像素（大多数显示器至少有那么大，可能会转到 1100 以确保安全，例如任务栏 (Windows) 或扩展坞 (OS X) 在一侧，因此：“min-width:1100px”。

它会因站点而异，但对我来说，我将“min-width:1100px”放在我的主 CSS 文件的 body 元素中。

如果您有一个响应式网站，那么它也会是百分比或 em 而不是 px...