css - HR-Line の横にある CSS フロート

Question

その下に垂直線のあるテキストが必要です。このコンスタレーションの右に、フローティング div が必要です。固定幅を設定したくありません。私が試したのはこれです：

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

私が欲しいのは、赤いボックスの周りの text+hr フローです。これは可能ですか?

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

代わりにボーダーボトムを使用してください

---

タグを付け、overflow:hidden を設定します。