css - 由于最小化导致的 Css div 对齐问题

Question

我一直在研究网站的界面。我被困在一件简单的事情上，我花了几个小时却没有得到解决。我正在给出我的项目的原型。当您放大页面或最小化页面时，对齐会变得混乱。我该如何解决？

score 2 · Accepted Answer

您正在使用浮点数，这就是它们的工作方式。尽可能多的将适合同一行，其余的将包裹在下面。当容器调整大小时，从边缘掉落的任何浮动都会再次移动到下方。

最简单的创可贴解决方案是添加一个带有固定的包装器 div，该 divwidth足够大以适合所有浮动而不用包装，或者至少一个min-width. 请注意，这将导致任何小于此宽度的窗口上出现水平滚动条。

score 1 · Accepted Answer

如果“最小化”是指调整窗口大小，那是因为您正在浮动这些列。有两种方法可以解决这个问题。

1）让您的网站响应。您可以在网上找到大量关于此的信息，但这里有一些资源可以帮助您入门：

2）添加一个min-width包含<div>所有浮动元素的。确保宽度大于排列的所有浮动项目。这将确保如果窗口变得比容器小，而不是将这些元素推到彼此下方，它只会阻止容器变得更远并创建一个滚动条。

请注意，这不一定是针对移动设备、平板电脑等进行设计的最佳方式，但它肯定会阻止您的网站在“普通”桌面显示器上崩溃。如果这是您唯一的目标受众，那么它没有问题。

这方面的一个例子是：

.container {
 min-width:960px;
}

2 回答 2