11

フロー テキストの列が狭くなりすぎないようにする方法が欲しいです。たとえば、HTML テキストの列で、左に浮いた画像があります。予想どおり、テキストは画像の周りの列の右側を下に流れます。

画像を流れるテキスト - カパイ!

ただし、画像が列とほぼ同じ幅の場合、テキストは非常に狭くなります。

テキストが画像の横を狭く流れる - 悪臭！

この場合、テキストが画像を通り過ぎるのではなく、画像がブロックであるかのように下にドロップするようにします。

画像の下にテキストがドロップ - チャー！

これを行うための簡単で一般的な方法を見つけようとしています。これはブログ用です。画像とテキストを追加したり、クラスを追加したり、マークアップ (ため息) に貼り付けたりして、フローを機能させたいと考えています。ブログ記事に JavaScript を挿入するのは難しいので、CSS と HTML のみで行うことをお勧めします。いくつかの方法がありますが（私の回答を参照）、どちらも満足のいくものではありません。もっと上手にできますか？

4

4 に答える 4

3

より良い解決策は、すべての段落に、目的の最小段落幅を持つ非表示の CSS 疑似要素を与えることです。この疑似要素に収まる十分なスペースがない場合は、画像の下に押し下げられ、段落も一緒に取り込まれます。

img が の場合、p:before にflot: right追加します。clear: left

img が の場合は、p:before にfloat: left追加しますclear: right

p:before {
  content: "";
  width: 10em;
  display: block;
  overflow: hidden;
  clear: left;   //use clear:right if img is float:left
}
于 2015-09-01T06:15:28.063 に答える
3

テキストの前に余分な要素を追加してみました。これはおそらく仕事だけだと思います。このようなもの：

<style>
.shim { display: inline-block; height: 0; width: 12em; }
</style>

<img class="floated">
<div class="shim"></div><br>
If one examines Derridaist reading...

これで問題ありません。フロー列が狭い場合は、シムが画像の下に落ち、テキストがそれに続きます。を追加し<br>て、テキストが 12 em でインデントされないようにする必要があります。これにより、垂直方向のスペースが 1 行追加されます。の行の高さを減らすことができると思います<br>が、全体が少し冗長になる可能性があります。

于 2013-08-22T11:20:17.543 に答える
1

私が見つけた最も簡単な方法は、最初のいくつかの単語が折り返されないようにして、列の最小幅を設定することです。

<style>
.chunk { white-space: nowrap; }
</style>

<p><span class="chunk">If one examines</span> Derridaist reading...

これはうまく機能しますが、次のようになります。

  • これを行うたびにテキストを手動で編集する必要があります
  • 列幅を正確に制御できません (em またはピクセル単位)
于 2013-08-22T11:05:32.687 に答える