我尝试显示两列,其中的行保持可显示内容的独立高度。我使用flex容器来实现这一点。
再次强调这一点:我试图保持独立的行高,所以效果是砖石。要看到这一点,运行下面的代码片段,并扩大您的屏幕看到这种砖石效果。
当在移动设备上观察页面时,我的解决方案不能保持元素的顺序。
在大屏幕上显示我想要的示例:
Col1. | Col2.
Item 1 Item 2
Item 3 Item 4
Item 5
移动设备上相同内容的示例:
Item 1
Item 2
Item 3
Item 4
Item 5
这是我的解决方案,虽然看起来很有效,但并不能维持秩序。有没有更好的方法来做到这一点?或者有没有一个简单的修复方法?
我想到的另一个解决方案是使用两个显示块,并根据媒体查询隐藏/显示相应的显示块,但这感觉有点古怪,肯定有更好的替代方案。
一个二个一个一个
1条答案
按热度按时间kyxcudwk1#
这是一个二维布局,我建议使用网格布局,因为它是非常有效的管理二维布局,它使HTML结构更简单,CSS更容易理解我已经创建了一个演示CodeSandbox,请有一个视图,让我知道如果你有任何查询DEMO
网格布局的一些资源