Css浮动在HR-Line旁边

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

使用border-bottom而不是

---

标记并设置overflow：hidden。