前端之家收集整理的这篇文章主要介绍了
html – Flexbox强制新列，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
我想在600px以下实现这种布局：
这个布局高于600px：
文本和图像的高度是可变的和未知的.
FlexBox非常适合源重新排序,但是我无法强迫新列在跨浏览器中工作.
使用page-break-before：always;在带有图像的div上强制使用一个新列 – 但这种技术仅适用于Firefox(39).
到目前为止我所拥有的This JS Fiddle shows an example(在Firefox中测试看工作示例).
如何在Chrome和IE11中使用此布局？
使用图像上的绝对位置将其移出文档流不是一个选项,因为我需要它来推送下面的内容.
虽然我使用的是flexBox,但我会接受任何可以实现所需布局的(仅限CSS)方法.
如果你愿意稍微搞乱一下源命令,你可以这样做：
使用此订单对容器进行分组：
> Img容器
>标题容器
>内容容器
然后将图像浮动到右侧,标题和内容位于左侧大尺寸.
在较小的尺寸下,为了实现视觉重新排序,您可以应用flexBox将它们重新排序为2 1 3.
因此,一种“混合”解决方案可能会解决这种情况.
原文链接：https://www.f2er.com/html/225682.html
