如何减小页面宽度，最终停止调整？

Question

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

在一个点之后，页面停止调整，因为任何更多的调整和标题将无法适应，超链接将重叠到下一行，它看起来很糟糕......

使这种情况发生的代码是什么？我猜是“min-width”，但是我没有运气。

Answer 1

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

max-width ：http://www.w3schools.com/cssref/pr_dim_max-width.asp

此属性将表示元素支持的最大width。所以它所包含的强制大小或内容，这个值将是该元素宽度的最大大小。

min-width ：http://www.w3schools.com/cssref/pr_dim_min-width.asp

此属性将表示元素支持的最小width。因此，无论是调整大小还是强制减少此元素的大小，此值都将是此元素宽度的最小大小。

---

这些属性通常用于控制案件的元素大小，确保用户拥有最佳的视觉体验。

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

Answer 2

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

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

Answer 3

这应该有效。我概述了您的内容将以黄色边框显示的位置，以便您可以看到它的外观。查看示例以查看该布局是否符合您的要求，以及是否查看代码。

Example

CODE

告诉我你的想法或告诉我这是否对你有用。

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

修改

以下是填充填充所需要做的事情。您只需添加内包装并在其上添加填充。我添加了内容（只是为了显示内容的外观）并从div中取出高度，以便它们只有高度自动（适合其内容）。是的，现在它的标记可能太多了，它可能会让人感到困惑，但它说明它现在有填充。

DEMO

Answer 4

实际上是“min-width”！

对于那些在将来想知道同样事情的人，只需在CSS文件中使用标签“min-width”分配某些元素，然后再分配1200px（大多数显示器至少那么大，可能是1100以下）如果任务栏（Windows）或停靠（OS X）位于一侧，则安全，因此：“min-width：1100px”。

它因网站而异，但对我来说，我在主CSS文件的body元素中添加了“min-width：1100px”。

然后，如果你有一个响应式网站，它将是百分比或em而不是px ......