Flexbox强制新列

Question

我想在600px以下实现这种布局:

这个布局高于600px:

---

文本和图像的高度是可变的和未知的.

Flexbox非常适合源重新排序,但我无法强迫新列在跨浏览器中工作.

使用page-break-before: always;与图像的股利迫使新的列- 但是这种技术只在Firefox(39)的作品.

这个JS Fiddle展示了 我到目前为止的一个例子(在Firefox中测试以查看工作示例).

如何在Chrome和IE11中使用此布局？

使用图像上的绝对位置将其移出文档流不是一个选项,因为我需要它来推送下面的内容.

虽然我使用的是flexbox,但我会接受任何可以实现所需布局的(仅限CSS)方法.

Answer 1

如果您愿意稍微打乱源顺序，您可以执行以下操作：

按此顺序对容器进行分组：

1. 图像容器
2. 标题容器
3. 内容容器

然后将图像向右浮动，并将标题和内容以大尺寸放置在左侧。

在较小的尺寸下，为了实现视觉上的重新排序，您可以应用 Flexbox 将它们重新排序为 2 1 3。

因此，一种“混合”解决方案，可能会解决这种情况。