針對移動設備的優化無法正確顯示

Question

我正在嘗試（和失敗）使我的網站在移動設備上看起來不錯，而且看起來不對。圖像顯示正確，但帶文本的框只是一個細條。 檢查圖像，盒子應該環繞圖像和文字與圖像一樣寬。

http://cdn1.cdnme.se/886420/6-3/problem_51612adfddf2b3563ed16d2f.jpg

我在這一個新手真的不知道我做什麼，但我嘗試失敗了，這一次雖然它讓人感覺不可能學會。有什麼我做錯了嗎？有什麼缺失？這不是唯一能做到的嗎？ 因爲我使用媒體查詢的代碼如下：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
/* Styles */ 
#wrapper { 
width: 100%; 
} 
#container { 
width:100%; 
margin: auto; 
} 
    #content { 
width: 100%; 
float: right; 
} 
#post { 
width: 100%; 
} 
#post img { 
    max-width: 100%; 
    margin: 0px 5px 20px 0px; 
float: left; 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 
/* Styles */ 
#wrapper { 
width: 100%; 
} 
#container { 
width:100%; 
margin: auto; 
} 
    #content { 
width: 100%; 
float: right; 
} 
#post { 
width: 100%; 
} 
#post img { 
    max-width: 100%; 
    margin: 0px 5px 20px 0px; 
float: left; 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 
/* Styles */ 
#wrapper { 
width: 100%; 
} 
#container { 
width:100%; 
margin: auto; 
} 
    #content { 
width: 100%; 
float: right; 
} 
#post { 
width: 100%; 
} 
#post img { 
    max-width: 100%; 
    margin: 0px 5px 20px 0px; 
float: left; 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
} 

Answer 1

，其中的元素是浮動的，因爲文本框假定您繼續它的圖像或內容一起浮動嘗試使用clear性能。

@media only screen 
and (max-width : 320px) { 

#content { 
width: 100%; 
float: right; 
clear:both; /*Important*/ 
} 

#post img { 
max-width: 100%; 
margin: 0px 5px 20px 0px; 
float: left; 
clear:both; /*Important*/ 
border-radius: 5px 5px 0px 0px; 
-webkit-box-shadow: 0px 3px 5px#000000; 
-moz-box-shadow: 0px 3px 5px#000000; 
box-shadow: 0px 3px 5px#000000; 
} 
}