针对移动设备的优化无法正确显示

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; 
} 
}