web-dev-qa-db-ja.com

画像の下のテキストの折り返しを停止するCSS

次のマークアップがあります。

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

テキストが折り返された場合、画像の「列」に入らないようにしたいです。私はtable（私がやっていた）でそれができることを知っていますが、これは この理由 に対しては機能しません。

私は成功せずに次のことを試しました：

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

float: rightも試しました。

ありがとう。

編集：私はそれがこのように見えるようにしたい：

IMG   Text starts here and keeps going... and
      wrap starts here.

これは好きではありません：

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.
csscss3css-floatword-wrap
78
Nick

この質問には多くの意見が寄せられており、これが受け入れられた答えなので、次の免責事項を追加する必要があると感じました。

この回答は、OPの質問に固有のものでした（例で幅が設定されていました）。動作しますが、要素、画像、段落のそれぞれに幅が必要です。それが要件でない限り、 Joe Conlinのソリューション を使用することをお勧めします。これは、この質問に対する別の回答として投稿されています。

span要素はインライン要素です。CSSで幅を変更することはできません。

次のCSSをスパンに追加して、幅を変更できるようにすることができます。

display: block;

通常、より意味のある別の方法は、<p>要素を<span>の親として使用することです。

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

<p>はblock要素であるため、CSSを使用して幅を設定できます。変更する必要はありません。

ただし、どちらの場合も、ブロック要素があるので、テキストがすべて画像の下にならないように画像をフロートさせる必要があります。

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

追伸画像上のfloat:leftの代わりに、float:rightをli pに配置することもできますが、その場合は、テキストを正しく再配置するためにtext-align:leftも必要になります。

追伸<p>要素を追加しないという最初の解決策を進めた場合、CSSは次のようになります。

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
31
Dan

多くの人々を捕らえるように思われるこの問題に対する非常に簡単な答え：

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

例を参照してください： http://jsfiddle.net/vandigroup/upKGe/132/

240
Joe Conlin

背景情報が必要な人のために、 短い記事overflow: hiddenが機能する理由を説明します。いわゆるブロックフォーマットコンテキストと関係があります。これはW3Cの仕様の一部であり（つまり、ハックではありません）、基本的にはブロック型フローを持つ要素が占める領域です。

適用されるたびに、overflow: hiddenはnewブロックフォーマットコンテキストを作成します。しかし、その動作をトリガーできるプロパティはそれだけではありません。 プレゼンテーション を引用して、Sydney Web Apps GroupのFiona Chan氏：

  • フロート：左/右
  • オーバーフロー：非表示/自動/スクロール
  • 表示：テーブルセルおよびテーブル関連の値/インラインブロック
  • 位置：絶対/固定
24
hqcasanova

margin-leftをspan要素で機能させる場合は、display: inline-blockまたはdisplay:blockにする必要があります。

3
Gareth

テキストにdisplay:flexを設定するとうまくいきました。

1
Mamrez

画像とスパンの周りにdivをラップし、次のようにCSSに追加します。

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

もっと少なく

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }
1
hawkeye126