2012-02-18 30 views
1

這裏是我想要做的一個大致輪廓:使用CSS浮動圖像:文本只能在原始位置流動?

TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT /============\ 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |   | 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT | IMAGE | 
TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT |   | 
              |   | 
              \============/ 

基本上,我想要的形象有float: right;。但是,我不確切地知道圖像應該在哪裏出現,如上所述。

我需要這樣的東西float: right; margin-top: -100px;,移動圖像,但周圍的元素,而不是新的原始位置的文本漂浮。如果我使用position: relative; top: -100px;,也會發生類似的情況。

有誰知道的實現只有CSS這種效果的一種方式?

+0

差不多的副本[CSS:環繞右下格文本?](http://stackoverflow.com/questions/499829/css-wrap-text-around-a-bottom-right-div)除了你的圖像從底部突出的事實可能很重要。 – 2012-02-18 06:52:47

+0

可以細說了 - '但文本圍繞浮動元素的原始位置,而不是新one' ..沒有文字去,你用'邊距上升背後的形象:-100px'? – 2012-02-18 09:58:52

回答

2

有沒有辦法在CSS今天純粹做到這一點。最好的你可以期望的是一些非常小的Javascript。

http://jsfiddle.net/chad/T7SAg/5/

這是基於約瑟的小提琴,使用該技術提到的SO答案是基蘭掛鉤。基本上它包括兩個浮動,一個「垂直推動器」浮動,以及一個浮動圖像,你想要在底部。您可以使用javascript來設置推動器浮動的高度,並將圖像浮動設置爲清除:對,它將可靠地下降到底部。

+0

好吧,這是一個恥辱它不能這樣做,但我會繼續前進,接受此爲最佳答案,因爲JS的解決方案的,應該我曾經嘗試做這樣的事情作爲網站設計的一部分。 – 2012-02-18 18:20:41