CSS：使圖像與文本的下方他們響應

Question

所以，我有以下情形：

如果它是所有圖像我coudl容易讓他們響應通過改變不同的視口寬度百分比然而這裏的問題是圖像下面有不同的文字，所以當你將寬度減小時，文字會將它推到下面。

有沒有辦法讓這種類型的場景響應？

Answer 1

以下是響應式佈局示例，此佈局適合每個屏幕分辨率。

製作響應式佈局時只需記住每個值應在%之間，並使用@media查詢佈局可以適應移動設備和平板設備。

例如檢查這個CSS代碼..

ul, p{margin:0; padding:0;} 
#gallery li {float:left;list-style-type:none; 
    padding:2px; min-width:22%;max-width:100%;width:22%} 
#gallery li img{display:block;width:100%;height:100%;} 
p{border:1px solid #000;width:100%;height:100%;} 

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
{ 
    ul#gallery{width:100%} 
} 
ul, p{margin:0; padding:0;} 
    #gallery li{width:100%;display:block;float:left;} 
} 

檢查演示在這裏。 http://jsbin.com/divuvehe/1/edit