CSS Span Float Left

时间:2012-05-16 15:28:28

标签: css css-float

所以我有一个div和两个跨度:

<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

假设B和C有足够的内容。 CSS片段是:

.A { position: absolute; } /* I need this to be absolute */
.B, .C { float: left; }
.clear { clear: both; }

但是我一直在获得正确图像的布局,而我希望它像第一张图像的布局(参见下图) enter image description here

请帮帮我。如果你好好解释一下为什么会发生这种情况会更好,为什么我的代码不像我预期的那样工作。浮动实际上是如何工作的。感谢。

2 个答案:

答案 0 :(得分:8)

你的html中的类是大写但不是CSS吗?

编辑:

.A { position: absolute; border: 1px solid blue; } 
.B, .C { float: left; border: 1px solid red; width: 100px; height: 20px; }
.C { height: 100px; }
.clear { clear: both; }
<div class="A">
    <span class="B"></span>
    <span class="C"></span>
    <span class="clear"></span>
</div>

Demo on JSFiddle

答案 1 :(得分:2)

该类区分大小写,“a”不是“A”!

更改您的HTML:

<div class="a">
    <span class="b"></span>
    <span class="c"></span>
    <span class="clear"></span>
</div>

另外,浮动的工作取决于宽度。为b和c div赋予宽度......