html - CSS 中的流体布局不保持比例

Question

我正在尝试使用百分比而不是像素在 CSS 中构建流畅的布局。我希望这样，如果用户试图放大网站，所有内部比例都应保持不变。

现在，当我放大时，文本从驱动器中长出，布局中断。

我使用的是包装器和三列，每列的宽度约为 30%。

由于这是一个布局问题，我已将整个布局发布到 JSBin 上。那里的问题也很明显。放大时，内部比例会中断，文本会变长。

http://jsbin.com/zerewuto/1/

有人知道如何解决这个问题吗？

Answer 1

在你的 CSS 添加:

* { box-sizing: border-box; }

这使得框模型计算框的内部填充和边框。最好在使用相关措施时使用。 (或总是)

编辑: 忘了说了。布局中断的原因是边距。在某一时刻，他们 + 的百分比超过了 100%。

考虑一个只有 100px 宽的页面。那么每个 10px 边距将等于 10%。

Lycka 直到!