Question

我想用CSS制作三列布局。是否有可能列项以任意顺序流动，我只是将它们“分配”给给定列，或者它们是否必须结构化以便它们首先填充第一列，然后填充第二列和第三列？这些物品具有相同的宽度，但高度不同。而且，列可以各自具有非常不同数量的项目。例如：

（1）对于结构：

container:
#1 div .red
#2 div .green
#3 div .green
#4 div .blue
#5 div .red
#6 div .green
#7 div .blue

是否可以使用CSS对其进行样式设置，使其分为三列，如：

.red       .green     .blue
+--------+ +--------+ +--------+
|#1      | |#2      | |#4      |
|        | +--------+ |        |
+--------+ +--------+ |        |
+--------+ |#3      | |        |
|#5      | |        | +--------+
|        | +--------+ +--------+
|        | +--------+ |#7      |
|        | |#6      | +--------+
+--------+ |        |
           |        |
           +--------+

（2）或者它必须结构如下：

container:
#1 div .red
#2 div .red
#3 div .green
#4 div .green
#5 div .green
#6 div .blue
#7 div .blue

有：

.red       .green     .blue
+--------+ +--------+ +--------+
|#1      | |#3      | |#6      |
|        | +--------+ |        |
+--------+ +--------+ |        |
+--------+ |#4      | |        |
|#2      | |        | +--------+
|        | +--------+ +--------+
|        | +--------+ |#7      |
|        | |#5      | +--------+
+--------+ |        |
           |        |
           +--------+

（3）甚至：

container for .red:
#1 div .red
#2 div .red
container for .green:
#3 div .green
#4 div .green
#5 div .green
container for .blue:
#6 div .blue
#7 div .blue

有：

.red           .green         .blue
+------------+ +------------+ +------------+
| +--------+ | | +--------+ | | +--------+ |
| |#1      | | | |#3      | | | |#6      | |
| |        | | | +--------+ | | |        | |
| +--------+ | | +--------+ | | |        | |
| +--------+ | | |#4      | | | |        | |
| |#2      | | | |        | | | +--------+ |
| |        | | | +--------+ | | +--------+ |
| |        | | | +--------+ | | |#7      | |
| |        | | | |#5      | | | +--------+ |
| +--------+ | | |        | | |            |
|            | | |        | | |            |
|            | | +--------+ | |            |
+------------+ +------------+ +------------+

如果可能的话，第一个（1）案例的CSS会如何？

Answer 1

如果你可以给容器一个明确的高度，你可以用flex-box解决它，设置类的顺序，并添加伪元素作为“破坏者”来强制换行：

那些伪造的东西在生产中是不可见的;我只是为了演示目的而使其中一个可见

.container {
  width: 500px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: solid 1px red;
  height: 500px;
}

.container div {
  width: 28%;
  margin: 10px;
}

.container div:nth-child(odd) {
  height: 130px;
}

.container div:nth-child(even) {
  height: 80px;
}

.container:before {
  content: "";
  width: 6px;
  /* only for demo */
  background-color: gray;
  /* only for demo */
  height: 100%;
  order: 15;
}

.container:after {
  content: "";
  height: 100%;
  order: 25;
}

.red {
  order: 10;
  background-color: red;
}

.green {
  order: 20;
  background-color: green;
}

.blue {
  order: 30;
  background-color: blue;
}

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
</div>

Answer 2

如果你有兴趣获得你的第二个例子，其中高度是可变的，并且只是插入以填充指定的列，那么看看这个

http://codepen.io/hoonin_hooligan/pen/OXbGBP

.your-column-wrapper {
  overflow: hidden;
  -webkit-column-count: 3;
  -webkit-column-gap: 15px;
  -webkit-column-fill: auto;
  padding-left: 15px;
  padding-right: 15px;
  margin-top: 10px;
}

.your-column-content {
  background-color: #fff;
  margin-bottom: 15px;
 -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}

这是我一段时间后建立的，可能是一个开始或用于您的用例的好地方。

Answer 3

你可以使用弹性盒子。只需将order属性添加到项目中：

e.g。 box1 {order:5;}将第1栏放在第5位。

＆＃13;

.container {
  width: 100%;
  display: flex;
  flex-direction:row;
  flex-wrap: wrap;
  justify-content:space-around; 
}

.box {
  height: 200px;
  color: #fff;
  text-align: center;
  flex-basis:30%;
  margin-top:5px;
}
.box p {
  padding-top: 90px;
}
.red {
  background: red;
  order:4;
}

.blue {
  background: blue;
  order:3;
}

.green {
  background: green;
  order:5;
}

.orange {
  background: orange;
  order:6;
}

.pink {
  background: pink;
  order:2;
}

.purple {
  background: purple;
  order:1;
}

＆＃13;

<div class="container">
  <div class="box red"><p>1</p></div>
  <div class="box blue"><p>2</p></div>
  <div class="box green"><p>3</p></div>
  <div class="box orange"><p>4</p></div>
  <div class="box pink"><p>5</p></div>
  <div class="box purple"><p>6</p></div>
</div>

＆＃13;

Answer 4

好的，这是一个可能更好地回答问题的解决方案。

你有3列，每列有一个未知数量的项目，每一个你点击随机播放的项目将随机排序。如果您希望在页面加载时发生这种情况，只需删除$('#shuffle').click(function() {并结束});并删除按钮

＆＃13;

$('#shuffle').click(function() {
  $('#box_container .box').each(function() {
    var itemCount = $('.item', this).length;
    $('.item', this).each(function() {
      var order = Math.floor(Math.random() * itemCount) + 1;
      $(this).css('order', order);
    });
  });
});

＆＃13;

#box_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

.box {
  color: #ddd;
  text-align: center;
  flex-basis: 30%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.item {
  background: rgba(255, 255, 255, 0.25);
  height: 50px;
  width: 80%;
  border: 1px solid black;
}

.red { background: red;}
.blue { background: blue;}
.green { background: green;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="shuffle">Shuffle</button>
<div id="box_container">
  <div class="box red">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="box blue">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
  <div class="box green">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</div>

＆＃13;

3列布局的结构

4 个答案: