0

我读了这篇文章http://css-tricks.com/implied-block/。我在自己的 chrome 浏览器中对其进行了测试，是的，使用浮动样式生成 display:block 样式。据我所知， display:block 意味着该元素成为块级元素，并且占据整行。下一个元素应该从新行开始。

但是我测试了 float 属性。虽然它生成了 display:block，但下一个元素（也是浮动的）仍然在同一行。那么它有什么问题呢？

 <style type="text/css">
    span
    {
        width: 30px;
        margin: 0 10px;
        background-color: Red;
        float:left;
    }
 </style>
<body>
<span>222</span><span>323</span><span>dd</span>

4

3 回答 3

2

您需要清除浮动以使“浮动”元素中断到下一行。您可以用 div 替换 span 元素，您将看到相同的效果。

于 2012-11-28T02:24:39.527 回答
1

You can try this blog, this might help you to understand more about float

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

于 2012-12-03T12:59:13.763 回答
0

如果您只想让每个跨度占据一个新行，那么给它们每个：

span { display:block; }

并删除：

span { float:left; }

A div would also accomplish this without css.

于 2012-11-28T02:28:41.227 回答