Question

我希望得到与此相同的结果：http://jsfiddle.net/mageek/faDkw/

HTML：

<div id="foo" >Hello</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
World!

CSS：

#foo
{
    background-color:red;
    height:400px;
    float:left;
}

但没有全部<br />，因为高度可能会改变。

我该怎么做？

Answer 1

您可以使用display: inline-block（MDN docu），与float: left不同，它不会将div放在页面流之外。

HTML

<div id="foo" >Hello</div>
<br />
World!

CSS

#foo
{
    background-color:red;
    height:400px;
    display: inline-block;
}

Example fiddle

“浮动：左;”的优点没有它的缺点

1 个答案: