css3列顺序错误

Question

我使用css3列来创建每个行顺序的3列，比如pinterest。

但它似乎是这样分类的：

1-4-7

2-5-8

3/6/9

而不是：

1\x{e76f}2/3

4\x{e 010}5

7/8/9

以下是我所写的：

.list .remains {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;

-webkit-column-gap: 0; /* Chrome, Safari, Opera */
-moz-column-gap: 0; /* Firefox */
column-gap: 0;

}

http://jsfiddle.net/uyv70h05/

这是自然行为吗？我能修好它吗？

谢谢

Answer 1

这是垂直列的预期行为。看起来您需要水平行，这可以通过在列表{1，2，3.}中的所有单独元素上设置float:left或display:inline-block来完成。

像这样：http://jsfiddle.net/uyv70h05/1/

如果元素的高度与pinterest不同，那么如果不使用javascript，我就无法复制它。有几个图书馆为这个目的服务，砖石是我听说最多的一个：http://masonry.desandro.com/

Answer 2

我不是css3的专家，但我认为自然的行为是这样的.一个快速的解决方法是通过div复制并粘贴此代码来对元素进行分组，它可能会工作.`

<div class="list">

    <div class="remains">
      <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>1</h3>
        <p>What happened</p>
      </a>
      <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>2</h3>
        <p>Hey How are you doing? you went missing lately... </p>
      </a>
    <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>3</h3>
        <p>Dude... it was AWESOME!</p>
      </a>
    </div>
        <div class="remains">
    <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>4</h3>
        <p>Please let it be fine...</p>
      </a>
    <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>5</h3>
        <p>SHIT! I thing I got it wrong!!! ...</p>
      </a>
    <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>6</h3>
        <p>ONE TWO ONE TWO ... SOUND CHECK.. Let's write something so long, it will go two rows!</p>
      </a>
            </div>
        <div class="remains">
    <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>7</h3>
        <p>Seems like we have got some big issue around here ...</p>
      </a>
    <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>8</h3>
        <p>NIGHTS IN WHITE SATIN.. NEVER REACHING ...</p>
      </a>
    <a class="item box" href="#">
        <img src="./img/usericon.png" alt="" class="user-icon" />
        <h3>9</h3>
        <p>NIGHTS IN WHITE SATIN.. NEVER REACHING ...</p>
      </a>

    </div>
 </div> 

`