Question

我试图让父级div在垂直顺序中适合父级。如果它超出了父div区域，那么它应该从右侧的新列开始。

顶部还有一个横幅占据了父div的整个长度。

＆＃13;

body {
  background-color: #000;
}

#mainArea {
  position: relative;
  margin: 0 auto;
  width: 400px;
  height: 400px;
  background-color: #777;
}

#mainBanner {
  position: relative;
  width: 400px;
  height: 50px;
  background-color: #FFF;
  float: bottom;
}

div[id^="box_"] {
  position: relative;
  width: 105px;
  height: 40px;
  background-color: #333;
  float: bottom;
  margin: 3px 3px 3px 3px;
}

＆＃13;

<div id="mainArea">
  <div id="mainBanner">
  </div>
  <div id="box_1"></div>
  <div id="box_2"></div>
  <div id="box_3"></div>
  <div id="box_4"></div>
  <div id="box_5"></div>
  <div id="box_6"></div>
  <div id="box_7"></div>
  <div id="box_8"></div>
  <div id="box_9"></div>
</div>

＆＃13;

这是jsFiddle。

目前第9个框已超出父div的底部。有没有办法让它在第一列右侧开始一个新列？

Answer 1

您可以使用Flexible Box Model来执行此操作，这是一个示例：

HTML：

<div class="container">
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
    <div>Box 4</div>
    <div>Box 5</div>
    <div>Box 6</div>
</div>

CSS：

.container {
   display: flex;
   flex-flow: column wrap;
   max-height: 300px;
   border: 1px solid #000;
}

.container div {
    height: 100px;
    width: 100px;
    background-color: #F00;
    margin: 5px;
    border: 1px solid #0F0;
}

如果您需要，可以在此处进行测试：https://jsfiddle.net/pg0y2d39/1/

将子div按垂直顺序放在父级中

1 个答案: