關於圖像包裝的建議？

我試圖做一個floating design，但是當我調整我的瀏覽器時，<img>標記旁邊的<p>標記開始放置到列中，而不是放在圖像下面。你可以在這裏看到的代碼 - >http://funkz.nfshost.com/ 這是在「** main-bottom-post**" ID . 我還搜查了網，但大多數文章是關於周圍的其他方法 - 提前使得下一列的IMG 謝謝， MK關於圖像包裝的建議？

來源

2012-07-31 user1565092

你到底要實現，究竟應該如何表現呢？你能更精確一點嗎？ – morgi 2012-07-31 08:31:21

是的，對不起，如果我不清楚 - 我希望文本浮在主底的圖像下。目前，當我調整我的瀏覽器的大小（看起來像一個更小的顯示器）時，文本就在列右側，圖像中，但不在其下。 – user1565092 2012-07-31 08:56:35

你將不得不使用media queries定位某個特定的分辨率時，你希望你的<p class="post-text">你的形象在移動和應用float: left;就這樣做。

例如：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    p.post-text { 
     float: left; 
    } 
}

這將使您<p class="post-text">浮動圖像下的480像素和之間320像素的畫面寬度。

你可能還想看看this作進一步的參考。

來源

2012-07-31 09:10:19 morgi

謝謝你，會嘗試併發布結果。 :) – user1565092 2012-07-31 10:08:24

好的，如果它有幫助，不要忘記標記爲「答案」。 – morgi 2012-08-02 07:34:10

試試這個在CSS：display:inline-block當你調整您的瀏覽器你獲得成功

來源

2012-07-31 08:41:22

我試圖顯示：img，p和容器標籤的內聯塊 - >沒有任何更改... – user1565092 2012-07-31 08:55:07

嘗試給予position財產。

或嘗試用media queries

@media screen and (min-width: xxpx) { 
    div {width: xxpx;} 
}

試試這個鏈接

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

http://www.danstorm.com/dan-storm-article-css-15.html

來源

2012-07-31 09:15:50 Prashobh

關於圖像包裝的建議？

回答

相關問題