0

2つpは画像の横にあり、2つ目は画像の下にないようにする必要がありpます。それは可能ですがfloat: left、これは多くのブラウザのバグを引き起こします（主にIEの下で）。どうすれば希望の結果を得ることができdisplay: inline-blockますか？

<div id="one">
    <img src="http://www.jcopro.net/wp-content/uploads/2011/12/ubuntu-logo1.gif" alt="" />
    <p>Content</p>
    <p>Content</p>
</div>

#one {
    display: inline-block;
    width: 800px;
    vertical-align: top;
}

#one img {
    display: inline-block;
    vertical-align: top;
    width: 100px;
}

#one p {
    display: inline-block;
    vertical-align: top;
    width: 600px;
    border: 1px solid gray;
}

デモ： http： //jsfiddle.net/MK5E9/1/

編集：さて、私は自分の問題を誤って説明しました：私はpお互いの横に1つの行を入れたくありません、私は画像のほかにそれぞれと両方の段落の下にそれらを置きたいです。

4

1 に答える 1

0

はい。ただし、3 つの要素すべてを格納できる十分な幅のコンテナーが必要です。<p>以下は、幅 300pxに縮小する場合に機能します。

例

編集、1つのOPの編集に基づく:

まあ、それが float が実際に本来意図されていたものです。画像をフローティングさせ、その周りにテキストを正しく流す。例。

画像を別の「列」に配置したい場合、つまりテキストが画像の周りを流れず、画像の行で新しい行を開始する場合は、要素の幅を制限する必要があります。こちらをご覧ください。

于 2012-06-05T20:54:11.690 に答える