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

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

1 个答案: