Question

我在包装器div中有子元素，当父级的高度小于包装器div时，我想浮动到新行：

<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 4
2
3

Answer 1

如何使用列？

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

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

Answer 2

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

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

要知道浏览器可以理解这一点：http://caniuse.com/#feat=multicolumn

如果要包含IE8，则需要writing-mode。 DEMO

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/

在父母中折叠浮动的孩子

3 个答案: