Question

这是我的代码：

.column {
    column-count: 4;
    column-gap: 10px;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
}

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

结果是：
1 4 7 10
2 5 8 11
3 6 9 12

我想要的是：
1 2 3 4
5 6 7 8
9 10 11 12

这可能吗？我该怎么做？

Answer 1

更容易：

＆＃13 ;

＆＃13;

.inner:nth-child(4n+1) {
    clear: left;
}

.inner {
    float: left;
    margin: 5px;
}

＆＃13;

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

＆＃13;

您可以应用float: left并清除float: left每4n + 1个元素。

<强>价：

:nth-child

Answer 2

Mansonry.js是解决方案。看看http://masonry.desandro.com/ 另请参阅此演示。这就是你需要我猜...我也在尝试实现这样的事情:) http://tympanus.net/Development/GridLoadingEffects/index2.html

据我所知，只有CSS才有可能做到这一点，这很难过

Answer 3

这次我实际上付出了一些努力。忽略之前编辑中的所有内容

the display property's inline-blocks可能是您想要使用的。

Here是如何使用它的完整指南

这是一个简短的演示

li {
    width: 200px;
    display: inline-block;
}

Answer 4

检查以下网址的简单代码。 https://github.com/JJ81/column-count 也许你可以拥有你想要的东西。

Answer 5

申请：

.column { 
  width: 100px; 
  overflow:hidden;
} 
.column .inner {
  width:  20px; 
  float:left; 
  text-align:center;
}

我可以水平而不是垂直订购我的CSS列吗？

5 个答案: