如何在某种排序图像库中对齐 ul 中包含的图像



我有一个对称的网格。 我已将输出类型设置为具有 6 列的浮点数。我的目标是在无序列表中显示列表项,在本例中为图像,在某种图像库(gist)中。

移动布局:所有图像的宽度均为 100% 垂直对齐。

BP500px:每张图片有 3 列宽 - 效果很好。

BP750px:每张图片宽 2 列 - 布局中断。

float-span 是否不适用于列表中的第二个项目 - 但基本上为每个项目编号 1 和 2 设置了 float-span(2),为每第三个项目设置了 float-span(2,last)?

还是组合$output:浮点和浮跨在对称网格环境中已经是这种目标的错误选择? 最好使用隔离混合?

最好的问候拉尔夫

如果有与之关联的代码,这将更容易调试,但大概对于您的 bp500px,您有类似 li:nth-of-type(even) for last 的东西。它具有比简单li更高的选择器权重,并且由于媒体查询的选择器权重低于伪选择器,因此您需要执行以下操作之一:

  • 撤消 bp750px 中的:nth-of-type(even)选择器,方法是使用所需的范围重新调用它_ 围栏 bp500px,以便您不使用(min-width: 500px) (min-width: 500px) and (max-width: 749px)

最新更新