div内的span不正确

Question

我想在div中使用span

div用于放置红色水平线

<div style="background-color:red;">
</div>

在div 中使用

span将元素放到右边

<div style="background-color:red;">
<span style="float:right;">
ABC
</span>
</div>

但是水平线不会变成红色，只有ABC显示在右侧，实际上没有div样式的效果，如宽度：900px .. ....为什么？

Answer 1

我建议：

<div style="background-color:red; text-align:right;">ABC</div>

否则，如果您希望利用原始示例中的overflow:auto，则需要将<span>添加到div的样式定义中。

干杯

Answer 2

将overflow:auto添加到div：

<div style="background-color:red;overflow:auto;">
<span style="float:right;">
ABC
</span>
</div>​

<强> jsFiddle example

浮动内部跨度会导致div基本上崩溃，添加溢出规则可以重新获得跨度。

Answer 3

浮动没有给你的div任何高度。您需要使用clear进行跟进。试试这个：

<div style="background-color:red;">
  <span style="float:right;">
    ABC
  </span>
  <div style="clear: both;"></div>
</div>

Answer 4

您需要添加属性overflow:hidden;在你的DIV中。 下面我提到了代码：

<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>