0

私は、各liが画像といくつかのテキストを持つリストを持っています。

<div style="width:500px;">
<ul >
   <li>
       <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTyBPzjBIU0gCSFH7mLEVMuQ6d69KYfe14YCsJcLXCbHzhqJZ2p" width="100px" style ="float:left; ">

        <p>First line......<br/>Second: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
   </li>

</ul>
</div>

問題はp、コンテンツが画像の高さを超えると、画像の下の左側に流れることです。どうすればこれを止めることができますか? 画像の下には何も必要ありません(それぞれ<li>)。

ありがとう

4

5 に答える 5

2

タグにセットoverflow: hidden;します。Pこの方法の利点は、イメージ タグの幅を知る必要がないことです。

li p {
  overflow: hidden;
}

デモを参照してください。オプションですが、画像と段落テキストの間に 5 ピクセルの空白を追加しました。

于 2013-01-03T22:09:11.913 に答える
0

画像をフローティングする代わりに、pタグを右にフローティングして、幅を400pxにすることができます。

于 2013-01-03T21:30:23.707 に答える
0

p要素に左マージンを追加できます。

​li p {
    margin-left: 105px;  /* width of your images */
}​

デモ

于 2013-01-03T21:33:25.360 に答える
0

段落にマージンを入れるだけです。このp{margin-left:105px;}作業例のようにhttp://jsfiddle.net/xSbmn/

img を左に浮かせたままにして、img と同じかそれ以上の余白を段落に追加します。

于 2013-01-03T21:36:09.517 に答える
0

幅 100px の画像を左にフロートさせ、幅 400px のパラグラフを右にフロートさせることができます。

それ以外の場合は、css ファイルを作成してスタイルを挿入し、html に記述しない方が効率的です。

于 2013-01-03T21:36:16.247 に答える