我能否水平而非垂直地排列我的CSS列？

Question

我能否水平而非垂直地排列我的CSS列？

29

这是我的代码：

.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

有可能吗？我该怎么做？

- Alan Yong

这篇文章可能有些帮助：http://css-tricks.com/forums/discussion/23914/re-arrange-default-column-order-css3-columns/ - rink.attendant.6

这真的非常有帮助。 - Alan Yong

2

链接已失效，你有离线版本的可能性吗？ - alecive

5个回答

1

Masonry.js是解决方案。看看这个http://masonry.desandro.com/。还要看看这个演示。我想这就是你需要的...我也在尝试实现这样的东西 :) http://tympanus.net/Development/GridLoadingEffects/index2.html 据我所知，仅使用CSS无法实现此功能，这很遗憾。

- max bugaenko

0

我这次真的付出了一些努力。请忽略之前的编辑内容。 display属性的inline-block可能是你想要使用的。这里有一个详细的使用指南。

以下是一个简短的演示。

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

- Stephan

@CallMeAhLun 你不认为这会起作用或者有更好的解决方案吗？前者似乎更有可能，这让我感到难过。 - Stephan

我正在寻找更好的解决方案，而你给我的答案并不是更好的解决方案。我需要在CMS中工作，我需要它是动态的。 - Alan Yong

@CallMeAhLun 嗯，你应该提一下。我会帮你做一些研究的。 - Stephan

@CallMeAhLun，这就是一个真正的答案。 - Stephan

那是我想要的不同之处。 - Alan Yong

-1

请查看下面的链接，我的简单代码。 https://github.com/JJ81/column-count 也许你可以找到你想要的。

- jaejun

4

在您的回答中包含相关代码是很好的做法，因为链接并不具备未来的可靠性。 - Patrick

-2

应用这个：

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

- Venk

1

你能在回答的正文中解释一下吗？ - Russia Must Remove Putin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Char · Accepted Answer

Is even easier:

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

.inner {
    float: left;
    margin: 5px;
}

<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>

你可以在每个4n + 1个元素上应用 float: left 和清除 float: left。

Ref:

:nth-child