css - HR-Line旁边的CSS浮动

Question

我想要一个下面有一条垂直线的文本，就在这个星座的右边，我想要一个浮动的 div。我不想设置固定宽度。我尝试的是这样的：

<div>
    huhu
    <hr class="green" />
    <div style="float: right">right</div>
</div>

我想要的是红色框周围的文本+小时流，这可能吗？

Answer 1

这个有可能; 但是，如果不进行小的修改，您提供的代码将无法正常工作。

您需要在要环绕它的内容 之前拥有右浮动 div - http://jsfiddle.net/S9mmU/1/

为确保浮动 div 永远不会占据屏幕的一半以上，您可以使用该max-width属性 -max-width:50%;

<div>
    <div style="float: right; max-width:50%; border:2px solid red; padding:2em; margin:1em;">right</div>
    huhu
    <hr class="green" />
</div>

我添加了红色边框、边距和一些填充，以便您可以看到效果。不用说，在实践中这些都不应该是内联样式。

Answer 2

使用边框底部而不是

---

标记并设置溢出：隐藏。