html – Flexbox强制新列

概述我想在600px以下实现这种布局： 这个布局高于600px： 文本和图像的高度是可变的和未知的. Flexbox非常适合源重新排序,但是我无法强迫新列在跨浏览器中工作. 使用page-break-before：always;在带有图像的div上强制使用一个新列 – 但这种技术仅适用于Firefox(39). 到目前为止我所拥有的This JS Fiddle shows an example(在Fi 我想在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.

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

总结

以上是内存溢出为你收集整理的html – Flexbox强制新列全部内容，希望文章能够帮你解决html – Flexbox强制新列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。