1

我正在尝试（但失败）让我的网站在移动设备上看起来不错，但它看起来不对。图像显示正确，但带有文本的框只是一条细条。检查图像，框应环绕图像，文本与图像一样宽。

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

1 回答 1

0

尝试使用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;
 }
}
于 2013-04-08T07:42:22.357 回答