1. 首頁
  2. 問答
  3. 如何將圖像浮動到其他的不在其下面的位置？

如何將圖像浮動到其他的不在其下面的位置？

2013-04-23 33 views
1

DEMO如何將圖像浮動到其他的不在其下面的位置？

我能做到這一點不沾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>

CSSS ...

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

編輯

的Kaloyan伊萬諾夫給了我最好的答案。但我想知道如何溢出隱藏的伎倆？

來源

2013-04-23 user2259812

+0

更改跨度：' span {display：block;向左飄浮;寬度：150px}'http://jsfiddle.net/BYnLd/4/ – Andrew 2013-04-23 13:46:59

回答

4

將overflow: hidden;添加到跨度。

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

來源

2013-04-23 13:42:44 Kaloyan

+1

太棒了！但如何溢出：隱藏工作？ – user2259812 2013-04-23 13:57:02

+0

魔法。 :) http://colinaarts.com/articles/the-magic-of-overflow-hidden/ – Kaloyan 2013-04-23 14:22:53

1

給你的圖像的底邊，如：

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

jsFiddle example

來源

2013-04-23 13:43:20 j08691

0

你也應該浮動span元素左側。並確保它的最大寬度爲150px。

CSS應該是這個樣子：

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

來源

2013-04-23 13:44:36 SandersD

相關問題

 相關問題