gpt4 book ai didi

javascript - 制作响应式网格

转载 作者:行者123 更新时间:2023-11-30 13:04:34 26 4
gpt4 key购买 nike

好吧,我正在尝试制作一个响应式网格,但它比这要复杂一点。它必须能够:

  • 调整大小,响应迅速
  • 网格应该尽可能多地排成一行,
  • 必须至少有两个元素连续
  • 最小页面大小为 320px
  • 元素应保持纵横比

这是一个开场白:http://codepen.io/loredonut/pen/KJDAE

纯 CSS 解决方案会很棒。感谢您的帮助!

最佳答案

您可以使用很多网格。

因为看起来你也想要移动屏幕,看看

960 Grid
1140 Grid

大多数网格将为您提供 x 数量的响应列,这些列在较小的屏幕尺寸上会折叠成 100% 宽度

现在,如果您真的想看一看 CSS-column-countCSS-colum-gap - 可在此处找到 CSS tricks ,(caniuse)。虽然您需要一些针对 IE6-9 的回退,但这应该允许您制作具有不同行高的列 - 如此 fiddle .

关于javascript - 制作响应式网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16154336/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com