3

おそらく、私が求めているものを画像で説明するのが最も簡単です：

ここに画像の説明を入力

画像を浮かせると、テキストがその周りを走ります。これは素晴らしいことです。しかし、テキストの量と画像のサイズによっては、これらのぎこちない部分が残ることがよくあります。この場合、ぎこちないテキストは、画像の横の列の方が見栄えがよくなります。

ぎこちないテキストの量に応じて、画像の下余白を追加できますが、レスポンシブ デザインでは画像が縮小し、テキストは同じサイズのままになるため、すべてのブレーク ポイントですべての画像に対してこれを行う方法はありません。

すべての段落で「overflow:auto」を使用して、新しいレイアウト コンテキストを作成し、テキストの折り返しを完全に停止することができます。しかし、十分なテキストがあるときにテキストを浮かせたいのですが、最終的な出力を制御できません。

これで実行できる（そしてレスポンシブサイトで画面サイズの変更を処理できる）非常に複雑なJSがない限り、解決策はないと感じています。だから私の質問は、人々はこれをどのように処理するのでしょうか? それを無視します？JSを使用しますか？

ありがとう

4

2 に答える 2

3

CSSでこれを行うことはできないと思います。ただし、JavaScript もそれほど複雑ではないと思います。element.getClientRects()TextRectangle オブジェクトのリストを返すを使用することをお勧めします。インライン要素の場合、各 TextRectangle オブジェクトはテキスト行を表します。

最後の TextRectangle の左オフセットが最後から 2 番目の TextRectangle の左オフセットと異なることを確認すると、最後の行が「ストラグラー」であり、1 つの TextRectangle ( bottom - top) の高さで画像の下マージンを調整できることがわかります。

getClientRectsCSSOM で標準化されましたが、一部のブラウザーでは実装にバグがある可能性があります。

もっと個人的な観点から言えば、このままでいいと思うし、私があなただったら気にしないだろう。

于 2013-02-11T11:30:36.430 に答える
0

これを修正する最も簡単な方法は、テキストの周りに別の DIV を追加し、それも同様にフロートすることです。

したがって、html は次のようになります。

<div>
    <img src="">
    <div>
        My text...
    </div>
</div>
于 2013-02-11T11:15:17.457 に答える