37

假设我有一个div包含一组元素（div）的元素，它们可能具有不同的高度，但它们都将具有相同的宽度。

我目前使用同位素 + masonry 实现了这一点，但由于一些浏览器已经支持 CSS3 多列，我希望为这些浏览器提供唯一的 CSS 解决方案，其余的回退到 Javascript。

这是我一直在尝试的 CSS：

.div-of-boxes {
  -webkit-column-count: 3;
  -webkit-column-gap:   10px;
  -moz-column-count:    3;
  -moz-column-gap:      10px;
  column-count:         3;
  column-gap:           10px;
}

然而，这使得元素的流动是自上而下的从左到右。我想要一个左右自上而下的流程。这是我想要的一个例子：

1 2 3
4 5 6
7 8 9

但这就是我得到的：

1 4 7
2 5 8
3 6 9

在Flow 多列元素中，在自上而下之前从左到右询问了类似的问题，但我对答案不满意，并且它不适用于不同高度的元素。这对于 CSS 列是否可能，或者它是一个限制？

4

5 回答 5

24

多列规范没有提供改变列之间元素分布的属性：http: //www.w3.org/TR/css3-multicol/。这样的属性似乎违背了模块的设计目的（重新创建报纸或杂志文章的布局方式）。

没有其他纯 CSS 解决方案可以让您实现您正在寻找的效果。

于 2013-02-17T20:10:46.043 回答
6

如果您的布局总是 3 列宽，您可以尝试nth在内部 div 上使用选择器。
您可以通过清除第 4 项来做到这一点。

#container {
    overflow: hidden;
    width: 440px;
}
#container div {
    background-color: gray;
    width: 110px;
    margin: 5px;
    float: left;
}
#container div:nth-child(4) {
    clear: both;
}
<div id="container">
    <div id="widget1">1</div>
    <div id="widget2">2</div>
    <div id="widget3">3</div>
    <div id="widget4">4</div>
    <div id="widget5">5</div>
    <div id="widget6">6</div>
    <div id="widget7">7</div>
    <div id="widget7">8</div>
</div>

JS小提琴

于 2013-02-17T20:14:36.970 回答
0

这是解决方案的链接！仅使用弯曲。

html

- var n = 0;
ul
  while n < 40
    li= n++
  li

css

ul {
    list-style: none;
    padding: 30px;
    background: #28285e;
    
    li {
        padding: 20px;
        margin: 6px;
        background: white;
        width: calc(50% - 52px);
        height: 100px;
        display: inline-block;
        border: {
            radius: 4px
        }
        
        &:nth-child(3n) {
            height: 40px;
        }
        
            
        &:nth-child(2n + 1) {
            height: 80px;
        }
        
        &:nth-child(even) {
            float: right;
        }
        
        &:nth-child(odd) {
            float: left;
        }
        
        &:last-child {
            clear: both;
            float: none;
        }
    }
}
于 2020-09-14T18:22:23.413 回答
0

如Tobias Ahlin的这篇博文中所述，有一个使用flexbox、:nth-child()和的纯 CSS 解决方案。order

这个想法很简单。flex-flow: columnwithwrap可以精确地做什么column-count。你需要两个条件才能让它工作： 1. flexbox 容器需要有一个固定的高度，并且它需要比你最高的列高。2.flex children需要宽度，2列布局50%，3列布局33%等。

.flex-container {
  display: flex;
  flex-flow: column wrap;
  height: 600px; /* You'll need to play with this value to distribute items correctly */
}

.flex-child {
  width: 33%; /* Creates 3-column layout */
}

这种方法有同样的问题column-count：元素按列排序，自上而下。但是由于我们使用的是 flexbox，现在我们可以访问该order属性。

使用:nth-child()andorder我们可以覆盖默认顺序。

.flex-child:nth-child(3n+1) { order: 1; }
.flex-child:nth-child(3n+2) { order: 2; }
.flex-child:nth-child(3n)   { order: 3; }

带有的项目order: 1将进入第一列，order: 2将进入第二列和order: 3第三列。

在(an + b)公式a中表示一个周期大小，n是一个计数器（从 0 开始），并且b是一个偏移值。所以选择从第(3n+1)一个开始的每第三个项目。选择每第三个项目，但从第二个项目开始。并选择从该项目开始的每第三个项目，因为索引 0 处没有任何内容。(3n+2)(3n)third

在某些布局中，列可能会合并。为了解决这个问题，Tobias 在列之间插入了伪元素：

/* Force new columns */
.flex-container::before,
.flex-container::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}

我不会在这里解释它是如何工作的，但是你可以在这里阅读更多关于它的信息。

这是 Tobias 的CodePen，用于 3 列布局。如果您使用的列超过三列，请在此处阅读如何进行调整。

于 2021-01-19T17:50:25.053 回答
-2

您可以使用 jQuery 重新排列列中的项目。如果是 2 个 cols，它将是：

$('.your-columns-container .your-item:nth-child(even)').appendTo('.your-columns-container');

https://jsfiddle.net/hzvp7sgf/

3列更复杂：

$('.your-columns-container .your-item:nth-child(3n - 1)').addClass('container-col2');
$('.your-columns-container .your-item:nth-child(3n)').addClass('container-col3');

$('.container-col2').appendTo('.your-columns-container').removeClass('container-col2');
$('.container-col3').appendTo('.your-columns-container').removeClass('container-col3');

https://jsfiddle.net/d4LeLyu5/

于 2015-08-18T16:51:39.720 回答