Question

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

.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（max-width：320px）'时它会叠加，例如。显示：块; ???

感谢您的帮助！

Answer 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 example here ..调整屏幕大小以查看它在移动设备上的外观＆lt; 320像素。

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

@media (max-width: 320px) {
.containerright {
    float:none;
}
}

Answer 2

@media (max-width: 320px) {
  .containerright {
    width: 100%;
  }
}

响应div - 文本包装div。最小化时可以堆叠吗？

2 个答案: