崩溃漂浮在父母的孩子

Question

我在wrapperdiv中有子元素，当父元素的高度小于wrapperdiv:

时，我想将其浮动到新行http://jsfiddle.net/vm57t/207/

<div class='wrapper'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
</div>
.wrapper{
   position:relative;
   top:5px;
   left:5px;
   width:30px;
   background:green;
   overflow:auto;   
}
.child{
   position:relative;
   top:0px;
   left:0px;
   width:30px;
   height:30px;
   background: #ccc;
   margin-bottom:3px;
}

:

1
2
3
4

然后当窗口大小变小时，它们开始在右侧创建新列:

1 4
2
3

Answer 1

如何使用列?

column-count: 2; /* or 3 or whatever */
column-fill: auto;

我已经更新了你的小提琴:http://jsfiddle.net/pMbtk/952/

Answer 2

Column CSS是提示，但没有列计数规则:http://codepen.io/gc-nomade/pen/YXGYpV

.child {
  background: gray;
  width: 30px;
  height: 30px;
  display: inline-block;
  margin: 0 0 3px;
  box-shadow: 0 3px green;
  text-align: center;
  line-height: 30px;
}
.wrapper {
  counter-reset: ulli;
  column-width: 30px;
  column-gap: 1px;
  -moz-column-width: 30px;
  -moz-column-gap: 1px;
  display: inline-block;
}
html,
body,
.wrapper {
  height: 100%;
  margin: 0;
}
.child:before {
  counter-increment: ulli;
  content: counter(ulli);
}

<div class='wrapper'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
</div>

要知道哪个浏览器可以理解:http://caniuse.com/#feat=multicolumn

如果你想包含IE8，那么你需要写入模式。演示

Answer 3

另一个解决方案-使用display: flex。但它只适用于现代浏览器。

示例如下:https://jsfiddle.net/vm57t/212/

.wrapper {
    display: flex;
    flex-flow: column wrap;
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    border: 1px solid red;
}
.child {
    width: 30px;
    height: 30px;
    border: 1px solid blue;
}

以下是flexbox的详细手册:https://css-tricks.com/snippets/css/a-guide-to-flexbox/