web-dev-qa-db-ja.com

テキストが画像を折り返すのを防ぐ

テキストが画像に巻き付かないようにしたい。 marginを使用せずにこれを行う方法はありますか？

img {
  margin-bottom: 2.5em;
}
<strong><img style="float: left;" src="https://www.google.com/images/srpr/logo11w.png" width="100" height="67" />Text here. Text here. Text here. Text here.
    <br />Text here. Text here. Text here. Text here. Text here. Text here.
    <br />Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.
    <br />Text here. Text here.Text here. Text here.Text here. Text here.

JSFiddleデモ

htmlcssmargin
6
user4100421

テキストを独自のコンテナでラップする必要があります。

<img>は左にフロートしているため、新しく追加したコンテナでoverflow: hiddenを使用して、テキストを折り返す必要がありません。

ただし、ブロック要素は<strong>要素の子孫であってはなりません。このタグを再考することをお勧めします。

img {
    width:100px;
    height:67px;
    float:left;
}
div {
    overflow:hidden;
}
<article>
    <img src="https://www.google.com/images/srpr/logo11w.png" />
    <div>
        Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
        Text here. Text here.Text here. Text here.Text here. Text here.
        Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here. Text here. Text here.<br />
        Text here. Text here. Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.Text here. Text here.<br />
        Text here. Text here.Text here. Text here.Text here. Text here.
    </div>
</article>

JSFiddle

18
George

原則として、ここにcssとhtmlのスキルを向上させるためのいくつかのベストプラクティスがあります。

1）常に画像とテキストを分離対応するタグ内：<img src="">画像の場合と<p>または<div>または<span>テキスト用。

2）原則として、コンテンツ（html）とスタイル（css）を可能な限り分離します。

3）CSSがどのように機能するかを理解するには、ボックスモデルを学ぶする必要があります。これがあなたを動かすための優れた記事です： http://css-tricks.com/the-css-box-model/

このボックスモデルは、問題の解決に役立ちます。

1
Pipo

WordPressプラグインを使用する

挿入[clearboth]Textエディター内（Visualによって削除されません）エディター）with：

  1. ClearBoth プラグインまたは
  2. Simple Breaks プラグイン。
0
SwiftArchitect