CSS 呈现 2 行列表项

发布于 2024-08-13 07:52:10 字数 356 浏览 1 评论 0原文

假设我有一系列

  • 设计为通过 float:left 在固定宽度容器内渲染的元素,如下所示:

    <前><代码>项目 1 |项目 2 |第 3 项 |第 4 项 |项目 5 |项目 6

    这很好,项目 5 和项目 6 被推到第二行,因为容器具有固定宽度。

    现在,是否有可能有与上面类似的东西,除了大多数项目将呈现在第二行中?像这样的东西:

    <前><代码>项目 1 |项目2 |第 3 项 |第 4 项|项目 5 |项目 6

    基本上,我想水平渲染一个项目列表,根据需要换行到第二行,但大多数项目都在第二行(如果存在)。要生成的项目数量可能会有所不同,但不会超过 2 行项目。

  • Let's say I have a series of

  • elements designed to render via float:left inside a fixed-width container as follows:

    Item 1 | Item 2 | Item 3 | Item 4
    | Item 5 | Item 6
    

    This is fine, Item 5 and Item 6 are pushed to the second row because the container has a fixed width.

    Now, is it possible to have something similar to above, except that majority of the items will render in the second row? Something like:

    Item 1 | Item 2 
    | Item 3 | Item 4| Item 5 | Item 6
    

    Basically, I want to render a list of items horizontally, wrapping to the second row as needed, but with majority of the items on the second row if it exists. The number of items to be generated may vary, but will not exceed 2 rows' worth of items.

  • 如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

    扫码二维码加入Web技术交流群

    发布评论

    需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

    评论(1

    以可爱出名 2024-08-20 07:52:10

    要么手动定义哪个项目开始新行(使用clear:both;),要么使用javascript来确定哪个项目应该中断,然后执行与上面相同的操作。

    Not without either manually defining which item starts the new line (with clear:both;), or using javascript to figure out which item should break, and then doing the same as above.

    ~没有更多了~
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文