Q

浮動問題與更小的屏幕尺寸

2011-11-22 50 views 0 likes

0

我想弄清楚最好的方法有一個圖像鏈接漂浮在它旁邊的內聯，這將強制鏈接成爲多線所需，同時保持圖像內聯下一步浮動到它。浮動問題與更小的屏幕尺寸

我在這裏建立一個例子 - http://jsfiddle.net/ubernoob/tYeGR/

如果大小的結果窗口中，你會看到，一旦它擊中一個足夠小的寬度圖像將落在下面的鏈接。

我該如何編碼，這樣鏈接將進入多行並將圖像放在旁邊？

2011-11-22 uber_n00b

+0

爲了浮動'h3'，請記住，如果浮動元素沒有設置寬度，則浮動元件會變得扭曲。 – marramgrass

A

回答

2

嘗試把<img>標籤<h3>之前並刪除float:left從<h3>

我編輯的jsfiddle：http://jsfiddle.net/tYeGR/7/

2011-11-22 21:52:27 DiogoDoreto

+0

感謝您的評論，我試過了，它只是放置在上面的圖像，而不是在下面，同樣，如果我把圖像放在H3中它的結果相同。 –

+0

您需要先放置它，然後移除「float：left;」在h3上工作。例如：http://jsfiddle.net/tYeGR/10/ –

+0

@ uber_n00b檢查jsfiddle鏈接，看看你是否在尋找 – DiogoDoreto

0

這個例子的工作原理：http://jsfiddle.net/jalbertbowdenii/tYeGR/18/但我改變了你的花車以絕對定位IMG的。如果這還不夠好，@mediaqueries是要走的路。我在jsfiddle嘗試了兩次，但沒有vail。可能是用戶錯誤。

2011-11-22 22:03:00 albert

0

您可以完全在他們的行定位圖像，然後添加一些填充到<h3>元素，因此鏈接不要被圖像覆蓋：

.list img { 
    position : absolute; 
    right : 10px; 
} 
.list h3 { 
    float  : left; 
    font-size : 12px; 
    padding : 10px 60px 10px 0;/*notice the extra 50px of padding I added to padding-right*/ 
    min-height : 50px;/*Notice this is added beacuse the image will not dictate height since it is positioned absolutely*/ 
}

這裏是一個的jsfiddle更動： http://jsfiddle.net/jasper/tYeGR/19/

2011-11-22 23:24:22 Jasper

相關問題