【问题标题】:Adaptive multi-column layout without extra gaps between rows [duplicate]自适应多列布局,行之间没有额外的间隙[重复]
【发布时间】:2018-01-06 21:23:25
【问题描述】:

我正在为一个我称之为马赛克的东西苦苦挣扎,因为在我看来这不是一个纯粹的自适应网格,但我不是 UX/UI 大师。

解释期望结果的最佳方式是blueprint,但我得到的却是regular grid layout,它不符合我的需求。

简而言之,我尝试使用 flexbox 概念来实现(display: flex; flex-direction: row; flex-wrap: wrap;)。

我认为我不需要分享我的代码,因为我选择了不合适的方法。请给我基本的想法。至此,我得出的结论是,这只能通过 javascript 来实现。

【问题讨论】:

  • 欢迎来到 Stack Overflow!预计您至少会尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research,通过谷歌或搜索SO,尝试一下。如果您仍然遇到问题,请返回您的代码并解释您尝试过的操作。
  • Paulie_D,我不是要代码,我是在寻找一个想法。我一直在使用 flexbox,现在猜测这对我来说是错误的技术。这就是为什么我没有发布我的代码——没有意义。在研究/谷歌期间,我找不到任何接近的实现。最后,如果 flexbox 是我真正需要的,我会很乐意发布我的最小化解决方案,或者至少是简而言之。
  • 我们不提供想法...我们解决实际编程问题。您所做的只是将问题转储给我们一个问题。这说明这太宽泛了,因此是题外话。如果您不提供代码,您要求提供代码。

标签: javascript html css flexbox


【解决方案1】:

您所追求的布局设计类似于 pinterest 布局,使用 flexbox 实现该布局设计非常令人沮丧。您可以咨询此post,它提出了与您相同的问题,并提供了几个解决方案/提示/技巧。我推荐的解决方案是使用Masonry,这当然涉及JavaScript。

【讨论】:

    猜你喜欢
    • 2016-09-30
    • 1970-01-01
    • 2016-10-31
    • 1970-01-01
    • 1970-01-01
    • 2018-03-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多