div的大小动态到文本 - 清除两者都不起作用

时间:2012-05-20 07:07:40

标签: html css

我希望文章的div(白色内容和右灰色列)会随着白色文本的高度而扩展。

我尝试将clear:both添加到#bodycont,但它没有帮助

如何使其灵活?

2 个答案:

答案 0 :(得分:1)

在使用浮点数后添加

clear: both;:如果你的标题有浮点数(我没有检查),将它放在#bodycont上会很有用。将它放在父节点上将不会做任何事情(尽管有其他方法,选择器从这个父节点开始,即parent:after { /* strange bunch of instructions working in IE8 and above */ },但那不是父节点本身)

一些一般性说明:

  • 不要在列或布局块上使用height属性 您不知道有多少内容会在那里,在另一个类似的页面或1年内 您不知道某些访问者是zooming text很多还是智能手机(related) 您可以在不使用height属性的情况下进行布局:当要完全显示图形元素时,特殊情况需要min-height(当存在不应裁剪的已知高度的漂亮背景时),一般情况是使用不需要元素高度的方法来正确显示。
  • 在浮动列后面的元素上或在包含浮点数的元素的兄弟上添加clear: both。在你的情况下页脚。
  • 浮动元素意味着其内容将从(HTML)流中删除。它不再“计算”以确定父母的身高,它并不是真的存在。因此,仅包含浮动的元素的高度为... 0.所有内容都从流中移除,没有高度。如果你有这个父母的背景,那就太烦人了,因为它不再显示了......但是你仍然希望那个背景与浮动儿童的最高相同。 Thierry Koblentz在这里描述了一个(不是那样)现代的clearfix:http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/:before部分仅用于一致的折叠边距,你只需要:after和父母一样,错误父母和下一个元素之间,:after

答案 1 :(得分:1)

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

很简单!