Question

我正在使用css3列，以便按行顺序创建3列，如pinterest。

但似乎这样排序：

1 | 4 | 7

2 | 5 | 8

3 | 6 | 9

而不是：

1 | 2 | 3

4 | 5 | 6

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>

`

css3列错误的顺序

2 个答案: