html – Flexbox强制新列
发布时间：2020-12-14 18:39:38 所属栏目：资源 来源：网络整理
导读：我想在600px以下实现这种布局： 这个布局高于600px： 文本和图像的高度是可变的和未知的. Flexbox非常适合源重新排序,但是我无法强迫新列在跨浏览器中工作. 使用page-break-before：always;在带有图像的div上强制使用一个新列 – 但这种技术仅适用于Firefox(
|
我想在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. 因此,一种“混合”解决方案可能会解决这种情况. （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |