使文本跳到下面的图像而不是包装在移动设备上

Question

我的吉他网站上有两个类别的博客布局页面。介绍文章图像设置为“float：left”，这使得设计可以在具有非常小的屏幕的设备上工作，或者如果它们具有更大的屏幕/翻转屏幕到水平模式。

在垂直模式下，在大型手机屏幕上，文字以奇怪的方式环绕图像。在这里，我更喜欢文本只是跳到图像下方。你可以看到我的意思here。

第一个例子是我所追求的效果，但在iPhone 6和nexus手机上，包装效果是不受欢迎的。

有没有办法使用CSS实现这一点？

我已尝试使用min-width CSS属性，但它没有任何效果。

使用Joomla vs 3.6.5，protostar模板。

Answer 1

我找到了两个解决方案：

.pull-left.item-image {
    float: none; /* option one */
    width: 100%; /* option two */
}

只有float或仅width（或两者）才能解决您的问题。但请注意，这将影响图像，而不仅仅是在移动视图中。因此，您需要使用窗口的宽度，并查看更改的最大高度。然后，在CSS上使用@media（假设您希望它适用于比450px更薄的每个屏幕：

@media screen and (max-width: 450px) {
    .pull-left.item-image { ... }
}