0

親コンテナーの右側に引き寄せられる画像によって定義される制限に達するまで、幅全体を埋めるテキスト要素を配置したい親コンテナーがあります。

残念ながら、私が何をしようとしても、テキストは全幅をカバーしたままで、画像はテキストブロックの下に表示されます。

<div class="subContext">
    <div class="description">
        This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. This text should break automatically where the image box starts. 
    </div>
    <div class="boxImage">
        <img src="about:blank" alt="I want to be on the right" />
    </div>
</div>

ここで私の JSFiddle を参照してください

私は何を間違っていますか？

少なくとも IE 8との下位互換性があり、javascript を使用しないクロスブラウザー ソリューションを探しています。

注:これは非常に基本的な CSS に違いないと感じました。それでもします。それでも、私は多くの可能な解決策を検索して試しましたが、どれもうまくいきませんでした。重要な重要な情報/理解が欠けているだけかもしれません。

4

6 に答える 6

2

これはあなたが望むものだと思います！

これをfloat: left;取り出して、HTML を再注文しました。

.contentBox .contentArea-inner .subContext .description {
    -webkit-backface-visibility: hidden;
}

HTML:

<div class="boxImage">
    <img src="/img/dev/contentBoxSymbolicImage.jpg" />
</div>
<div class="description">
 This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. 
</div>
于 2013-10-04T20:38:57.297 に答える
1

これは、あなたが求めているものを備えたjsFiddleです。

HTML をいくつか再配置しただけです。

<div class="subContext">
    <div class="boxImage">
        <img src="/img/dev/contentBoxSymbolicImage.jpg" />
    </div> 
    This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. This is just a blindtext. 
</div>
于 2013-10-04T20:41:37.947 に答える
0

float: left説明の前に画像を移動し、説明の div からを削除します

HTML

<div class="subContext">
    <div class="boxImage">
        <img src="http://lorempixel.com/300/200" />
    </div>
    <div class="description">
        This is just a blindtext. This is just a blindtext. ... 
    </div>
</div>

更新された JSFiddle

要素をフローティングするとは、大まかに言うと、通常の流れからそれを取り出し、そのコンテナーの左または右に配置し、次の要素をその周りにフロートさせることです。

于 2013-10-04T20:40:53.240 に答える
0

説明に width:85% を指定すると、問題が解決しました。 http://jsfiddle.net/dShYL/8/

画像サイズがそれぞれで異なる場合は、js が適していますが、50*50 の場合、幅 85% - 90% で解決する必要があります。

.contentBox .contentArea-inner .subContext .description {
        -webkit-backface-visibility: hidden;
        float: left;
        width:85%;

    }
于 2013-10-04T20:41:13.403 に答える
0

これが要件を満たしているかどうかはわかりませんが、1 つの方法を次に示します。

floatから削除div.descriptionし、HTML の画像の上に移動しました。
説明は、フロートされた画像を囲むようになりました。

注意点の 1 つは、テキストが画像よりも高い場合、テキストが画像の下に折り返されることですが、これが望ましくないかどうかはわかりません。

.contentBox .contentArea-inner .subContext .description {
    -webkit-backface-visibility: hidden;
    // removed float
}

<div class="boxImage">
    <img src="/img/dev/contentBoxSymbolicImage.jpg" />
</div>
<div class="description"> ... </div>

http://jsfiddle.net/dShYL/4/

于 2013-10-04T20:39:04.847 に答える
0

div .description に 100% 未満の幅を指定するだけです。(画像の幅は 50 ピクセルなので、実際には 100% ～ 50 ピクセル未満である必要があります)

.description { width: 75%; }

作業フィドル: http://jsfiddle.net/dShYL/6/

理由: フローティングにより、ブロック レベル要素の幅がその子要素に依存します。少なくとも親の幅に拡大され、内部のコンテンツが十分に大きいため、全幅に拡大されます。

.description と .boxImage の順序を変更して、.boxImage が最初になるようにすることもできます。ただし、これは意味的には正しくありませんが、.description に固定幅を指定したくない場合に機能します。

于 2013-10-04T20:42:33.550 に答える