87

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

<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.
4

6 に答える 6

260

この問題に対する非常に単純な答えは、多くの人をひきつけるようです:

<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/

于 2013-03-14T22:17:12.573 に答える
35

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

この回答は、OPの質問（例で幅が設定されているもの）に固有のものでした。それが機能している間、それはあなたが要素、画像と段落のそれぞれに幅を持っていることを要求します。それがあなたの要件でない限り、私はこの質問に対する別の答えとして投稿されているジョー・コンリンの解決策を使用することをお勧めします。

要素はインライン要素であり、spanCSSでその幅を変更することはできません。

次の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}

PSfloat:left画像の代わりに装着することもできますが、その場合はテキストを正しく再配置float:rightする必要があります。li ptext-align:left

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

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}
于 2012-07-10T10:51:03.870 に答える
25

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

適用されるたびに、新しいブロック書式設定コンテキストoverflow: hiddenを作成します。しかし、その動作をトリガーできるプロパティはこれだけではありません。Sydney Web Apps Group の Fiona Chan によるプレゼンテーションを引用します。

  • フロート: 左/右
  • オーバーフロー: 非表示 / 自動 / スクロール
  • 表示: table-cell およびテーブル関連の値 / inline-block
  • 位置:絶対/固定
于 2013-10-31T23:49:00.773 に答える
3

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

于 2012-07-10T10:37:08.737 に答える