Question

我正在尝试创建一个多列布局，同时仍然将“内部div”放在一起。行高属性可以很好地将div叠加在一起，但将我的内部div分成两半。

列的高度不必完全相同。

非常感谢任何帮助！

<div class="c">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
</div>

.c {
  -webkit-column-width:250px; -webkit-column-gap:10px;
  -moz-column-width:250px; -moz-column-gap:10px;
  column-width:250px; column-gap:10px;
  color:white;
}

.c > div:nth-child(1) { height:100px; background-color:grey; }
.c > div:nth-child(2) { height:200px; background-color:blue; }
.c > div:nth-child(3) { height:100px; background-color:red; }
.c > div:nth-child(4) { height:100px; background-color:yellow; }
.c > div:nth-child(5) { height:100px; background-color:black; }
.c > div:nth-child(6) { height:100px; background-color:orange; }

见下面的例子 http://jsfiddle.net/D73pD/

Answer 1

你必须添加

-webkit-column-break-inside: avoid;

每个div元素的

更新小提琴： http://jsfiddle.net/D73pD/1/

Source

使用列宽属性时防止拆分内部div

1 个答案: