1

デモ

HTMLに触れずにこれを達成できますか?

html...

    <div>
    <img src="http://i50.tinypic.com/1zey0j8.gif" alt="" />WALLPAPER
     <span>some paragraph here 
some paragraph here          /*this should not go below the image*/
some paragraph here 
some paragraph here
</span>
    </div>

CSS...

div{width: 200px;}
img{float: left; width: 50px; height: 50px;}
span{display: block;}

編集

Kaloyan Ivanovが最良の回答をくれました。しかし、オーバーフロー隠しがどのようにトリックを行うのか知りたいですか?

4

4 に答える 4

4

Add overflow: hidden; to the span.

http://jsfiddle.net/BYnLd/2/

于 2013-04-23T13:42:44.390 に答える
2

画像の下の高さがわからない場合があります。だからmargin-bottom: 100%;あなたのイメージに使用してください

このフィドルを参照してください

編集

編集済みの質問として、そのリンクを提供しています

CSS 'overflow:hidden' はどのように機能して要素 (浮動要素を含む) を強制的に浮動要素をラップするのですか?

于 2013-04-23T13:51:29.343 に答える
1

Give your image a bottom margin like:

img {
    float: left;
    width: 50px;
    height: 50px;
    margin-bottom: 200px;
}

jsFiddle example

于 2013-04-23T13:43:20.250 に答える
0

span 要素も左にフロートする必要があります。また、最大幅が 150px であることを確認してください。

CSS は次のようになります。

div{width:200px;}
img{float:left; width:50px;height:50px;}
span{display:block; width:140px; padding-left:10px;}
于 2013-04-23T13:44:36.237 に答える