CSS列格问题与排序

Question

受到这个 tutorial 的启发，我设置了一个Fiddle，其中有5列。当使用5张图片时，它可以正常工作。然而，当使用6张图片时，它会将其排序为2行3列，而不是一行5列和一行1列。其他配置也有类似的效果。

这是由于CSS中的默认布局方式导致的。您可以使用flexbox或grid布局来解决这个问题。

- Andy

---

另外，CSS 属性 width: 100% !important; 在 IE9 和其他浏览器中的解释不同。顺便说一下，如果您想要兼容 IE8 的页面，请不要使用列间距，而是像下面的答案一样浮动它。 - Stano

好的，谢谢。我对使用CSS3持有一些怀疑态度，主要是因为老式浏览器的问题。 - Andy

Answer 1

您应该使用额外的样式，如下所示：

   float:left;

- cube

---

这根本不需要。 - Loktar

@Stano 做得很好，但你进行了更多的编辑而不仅仅是float: left; 如果你将其作为单独的答案发布，我可以给你完全的信用。 - Andy

虽然这确实可以工作，但它并没有真正解决列问题。 - Loktar

@Loktar 不确定你的意思，但我认为这个简单的浮动解决方案可以得到相同的结果并修复列问题。如果你知道更好的方法来解决它，欢迎在这里发布你的解决方案。或者你可以将你的建议发送给w3c，也许他们会创建一些新的参数来修改这种行为。祝你好运。 - Stano

@Stano，基本上我是在指出这并没有真正解决或者处理CSS3 columns的怪异问题。这只是使用了完全不同的方法来解决问题。 - Loktar

我认为重点在于CSS3列规范将其构建列的工作留给浏览器，基于提供的内容。通过不指定列宽，column-count仅作为最大值。列和行是两个不同的实体。当我阅读OP的问题时，它几乎让我觉得它更关注行而不是列，这就引出了一个问题，为什么要开始使用CSS3列。一段时间以前，我创建了一个基于此前提的应用程序。 - cube