使用css的自适应布局

Question

我正在尝试创建一个适应性的css布局，我需要学习很多东西，然后所有的帮助都是欢迎的。这里有一个关于自适应here的例子。在我的小提琴里什么都不能用，有here。

Answer 1

我不知道你的问题是什么。但是，如果你问为什么你的列没有正确排列，那是因为数学。

您将它们设置为宽度为45%，边距为3% (外加边框)。45 + (2*3) = 51%。你不能在100%的空间中有两列，每列51%。

Answer 2

Here's上有一个关于如何实现自适应布局的教程，让你开始学习。它还提供了示例代码。

Answer 3

这是您的fiddle, slightly updated。

正如DA已经指出的，HHalfBarLft和HHalfBarRgt的with太大了，所以它们不适合彼此。

此外，您不必在ct div上使用position: absolute：只需在其中添加一个clearing元素(就像HFullBar一样)，就可以根据您的需要伸展高度。

当你删除所有定位的元素时，页脚也会留在原处。