0

我希望文章的 div（白色内容和右侧灰色列）将随着白色文本的高度而扩展。

我试图添加clear:both到#bodycont，但它没有帮助

我怎样才能使它灵活？

4

2 回答 2

1

clear: both; is to be added AFTER using floats: placing it on #bodycont would be useful if your header had floats (I didn't check). Placing it on the parent will do nothing (though there're other methods where the selector begins with this parent, namely parent:after { /* strange bunch of instructions working in IE8 and above */ }, but that's not the parent itself)

Some general instructions:

  • don't ever use the height property on columns or layout blocks.
    You don't know how much content will go there, on another similar page or in 1 year.
    You don't know if some visitors are zooming text a lot or on a smartphone (related).
    You can have a layout without a single use of height property: particular cases need min-height when graphical elements are to be displayed entirely (when there's a nice background of known height that shouldn't be cropped), general case is using methods that don't need the height of elements to display properly.
  • add clear: both on the element that follows floating columns or on the sibling of an element that contain floats. In your case the footer.
  • Floating an element means its content is removed from the (HTML) flow. It doesn't "count" anymore for determining the height of a parent, it's not really there. Thus, an element that only contain floats have an height of ... 0. Everything was removed from the flow, no height. That'as annoying if you had a background on this parent as it won't display anymore... but you still want that background to have the same height as the tallest of the floating children. A (not so) modern clearfix is described by Thierry Koblentz here: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/ (the :before part is only there for consistent collapsing margins, you only need the :after along with the parent, err betweeen the parent and the next element, that's where :after is)
于 2012-05-20T08:02:00.510 回答
1

解决方案是添加display:table和删除高度。因为允许我根据文本显示高度。

很简单！

于 2012-05-22T12:32:35.907 回答