CSS 呈现 2 行列表项
假设我有一系列
这很好,项目 5 和项目 6 被推到第二行,因为容器具有固定宽度。
现在,是否有可能有与上面类似的东西,除了大多数项目将呈现在第二行中?像这样的东西:
<前><代码>项目 1 |项目2 |第 3 项 |第 4 项|项目 5 |项目 6基本上,我想水平渲染一个项目列表,根据需要换行到第二行,但大多数项目都在第二行(如果存在)。要生成的项目数量可能会有所不同,但不会超过 2 行项目。
Let's say I have a series of
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
要么手动定义哪个项目开始新行(使用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.