时间戳

首页 > 解决方案 > 如何让孩子成长并包裹在第一个元素之下？

html - 如何让孩子成长并包裹在第一个元素之下？

问题描述

我有一个父元素，它包含 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>

标签： htmlcss

解决方案

只要您将 div 与您的pickdiv 分开，您就不可能执行此操作others- 您需要将三个containerdiv 与您的pickdiv 结合起来（如下面的代码片段）。

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>

推荐阅读