1

これは、インターネット上で際限なく議論されてきたものの 1 つだと確信していますが、解決策が見つかりません。

段落と同じ行に 2 つの div を配置する必要があります。両方の div の幅は可変であり、段落を使用可能なスペースに縮小してその内容を折り返す必要があるため、要素自体が行から折り返されることはありません。

JSFiddleをセットアップしました

ここに HTML:

<div class="icon"></div>
<p>This is a really long line of text that will need to wrap</p>
<div class="count"></div>

ここにCSS：

.icon {float:left; width:50px; height:50px; background-color:#4d4d4d; margin-right:10px}
p {margin:0; overflow:auto; display:inline-block}
.count {float:right; width:250px; height:50px; background-color:#ff0000; margin-left:10px}

Javascript を使用してこれを実現できることはわかっていますが、純粋な CSS ソリューションを見つけたいと思っています。

ありがとう。

4

3 に答える 3

0

とった。段落を inline-block ではなく display:block に変更し、要素の順序を変更して、段落がマークアップの最後になるようにすると、完全に機能します。

于 2013-10-25T17:13:49.777 に答える