html - CSS 上简单模板的问题

Question

我正在学习如何使用 CSS e HTML5 制作一个简单的模板，但我遇到了一个问题:我想制作一个带有侧边栏和文章列表的容器，但它不起作用。 眼见为实:http://informaticalab.com/template.html

那条黑线，应该是包含这两个元素的简单边框。 感谢您的帮助，抱歉英语不好， 费德里科

Answer 1

看起来你有一个无关的</div> ，这是一个问题 :) 它已在下面的 fiddle 中删除。

如果您正在使用 float 元素，您需要清除这些 float 元素，以便容器“拉伸(stretch)”到内容的底部。

一个简单的方法是创建一个名为“clear”的新类或类似于以下内容的类:

.clear {
    clear:both;
}

但是，缺点是您引入一个新的 dom 元素只是为了修改布局。

另一个解决方案(由 Quirksmode http://www.quirksmode.org/css/clearing.html 提供)是告诉包含元素处理这些 float 元素:

#container {
    ....old code...
    overflow: auto;
    width: 100%;
}

这在某些情况下有一些怪癖，因此您可以选择使用哪种。

在这里查看 fiddle :http://jsfiddle.net/callseng/kZB5j/

这使用了清除元素的方法。