css - 使文本跳到下面的图像而不是在移动设备上换行

Question

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

在垂直模式下，在大手机屏幕上，文本以一种奇怪的方式环绕图像。在这里，我更希望文本只是简单地跳到图像下方。你可以明白我的意思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(或两者)将解决您的问题。但是，请注意这会影响图像，而不仅仅是在移动 View 中。因此，您需要调整窗口的宽度并查看更改的最大高度是多少。然后，在 CSS 上使用 @media(假设您希望它应用于每一个小于 450 像素的屏幕:

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