如何使用浮动内容扩展div

时间:2012-08-02 19:17:49

标签: html css css-float css-position

我想设计一个可扩展的div,它应该按照里面的内容进行扩展。内容有两个div s,左边浮动,每个都有固定的宽度。这些div本身可根据其文本内容进行扩展。最后,他们是父div中的div,这些div表示两个浮点数两个清楚。但是,父div不会展开以包含子div,尽管我认为它应该是,因为所有元素都相对定位,而不是绝对定位。我怎样才能实现扩张?小提琴在http://jsfiddle.net/Cupidvogel/y79NS/1/

2 个答案:

答案 0 :(得分:1)

如果我了解您可以尝试将overflow: hidden;添加到.main班级样式。

答案 1 :(得分:1)

将float:left添加到你的主div“.main”(并且这样做你不需要清除:当所有元素都浮动时,这两个div都已经存在了)

http://jsfiddle.net/y79NS/4/

你仍然可以使用clear:你的示例中的两个属性,这样你就不需要将float:left添加到主div,但是你有一个明确的div在错误的地方。这应该放在浮动右侧div中,或者你可以删除.clear div并使用“:after”来清除div:

http://jsfiddle.net/y79NS/5/

这里有一个link,可以解释为什么会这样。