2

我已经设置了一个全局元素来将图像向右对齐：

.containerright {
    float: right; margin: 5px 5px 5px 10px; position:relative;
}

在屏幕最小化为移动纵向尺寸之前，它可以完美运行。然后文本换行留下了几个字。

例如：

<div class="containerright"><img src="/images/imageexample.jpg" width="223" height="160" hspace="0" vspace="5" alt="imageexample" border="0"></div>

<h2>Here is an example of heading text!</h2>

当最小化时，“这是一个示例……”与图像的左上角对齐，句子的其余部分“……标题文本！” 落在图像下方，因此图像在其右侧有一个巨大的中断。

我如何设置类，以便在查看“@media（最大宽度：320px）”时它会堆叠，例如。显示：块；？？？

谢谢您的帮助！

4

2 回答 2

1

只需删除媒体查询 CSS 中的浮动。:) 

@media (max-width: 320px) {
.containerright {
    float: right; /* remove the float on the mobile media query */
    margin: 5px 5px 5px 10px; 
    position:relative;
}
}

这里的 jsFiddle 示例.. 调整屏幕大小以查看它在 < 320px 的移动设备上的样子。

或者，您可以在媒体查询中覆盖它..

@media (max-width: 320px) {
.containerright {
    float:none;
}
}
于 2013-09-04T00:54:26.043 回答
0 
@media (max-width: 320px) {
  .containerright {
    width: 100%;
  }
}
于 2013-09-04T01:30:30.063 回答