Question

我有一个父对象，其中包含2个子元素，第二个包含3个（灰色）其他要自动包装的子元素，唯一的问题是第二个容器没有包装在第一个容器的下方，因为这有点很难解释，我已经重新创建了确切的问题，这里是jsfiddle，因为可以拖动容器以更好地理解问题。

所需结果：

[box] [ 1 ] [ 2 ] [ 3 ]
-----------------------
[box] [ 1 ] [ 2 ]
[ 3 ]

body { background-color: #20262e }
.parent { display: flex; }
.pick { margin-right: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px; background-color: #ffffff; display: inherit; justify-content: center; align-items: center; }

.others { display: inherit; flex-wrap: wrap; }
.others > .container { display: inherit; justify-content: center; align-items: center; background-color: #ddd; margin-bottom: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px;  margin-right: 20px; }

<div class="parent">

  <div class="pick">
    <h2>first box</h2>
  </div>

  <div class="others">
    <div class="container">
      <h2>...</h2>
    </div>
    <div class="container">
      <h2>...</h2>
    </div>
    <div class="container">
      <h2>...</h2>
    </div>
  </div>

</div>

Answer 1

只要您将pick的div与others分开，就无法实现您要执行的操作-您需要将三个container的div与您的pick div（如下面的代码段）。

body { background-color: #20262e }
.parent { display: flex; flex-wrap:wrap; }
.pick { margin-right: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px; background-color: #ffffff; display: inherit; justify-content: center; align-items: center; margin-bottom: 20px; }

.parent > .others { display: inherit; justify-content: center; align-items: center; background-color: #ddd; margin-bottom: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px;  margin-right: 20px; }

<div class="parent">

  <div class="pick">
    <h2>first box</h2>
  </div>

    <div class="others">
      <h2>...</h2>
    </div>
    <div class="others">
      <h2>...</h2>
    </div>
    <div class="others">
      <h2>...</h2>
    </div>

</div>

Answer 2

为什么要在父元素上使用flex显示？

直接在父元素上使用block显示并定义固定宽度怎么办？

HTML：

<div class="parent">
  <div class="pick">
    <h2>first box</h2>
  </div>
  <div class="others">
    <div class="container">
      <h2>1</h2>
    </div>
    <div class="container">
      <h2>2</h2>
    </div>
    <div class="container">
      <h2>3</h2>
    </div>
  </div>
</div>

CSS：

body { background-color: #20262e }
.parent { display: block; width: 307px; }
.pick { margin-right: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px; background-color: #ffffff; display: inherit; justify-content: center; align-items: center; }
.others { display: inherit; }
.others > .container { display: inherit; justify-content: center; align-items: center; background-color: #ddd; margin-bottom: 20px; min-width: 307px; min-height: 330px; width: 307px; height: 330px;  margin-right: 20px; }

Answer 3

您只能包装div内的内容。如果要这样做，所有组件应位于同一div下。检查js小提琴。

enter code here http://jsfiddle.net/L91kebox/9/

如何使孩子成长并包裹在第一要素之下？

3 个答案: