Question

我正在尝试使用弹性框（Bootstrap 4）制作类似下图（上半部分）的类似内容。

但是，正如您在上图和代码的第二部分中看到的那样（请展开代码片段）我不能将绿色正方形（数字）4推到数字1（红色）下面和数字2（黄色）之间如图所示。我的意思是，红色方块和绿色方块之间存在间隙，我想删除它。

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">



</head>

<body>

  <!--main-->
  <div class="container">
    <!--projects-->
    <div style="background-color:PINK" class="col-12">
      <div class="row">

        <div class="d-flex flex-wrap ">

          <div style="background-color: red; width: 370px; height: 258px; padding: 1.5rem; ">1</div>
          <div style="background-color: yellow; width: 370px; height: 516px; padding: 1.5rem; ">2</div>
          <div style="background-color: blue; width: 370px; height: 258px; padding: 1.5rem; ">3</div>
          <div style="background-color: green;  width: 370px; height: 258px; padding: 1.5rem; ">4</div>
          <div style="background-color: orange; width: 370px; height: 516px; padding: 1.5rem;">5</div>
          <div style="background-color: white;  width: 370px; height: 258px; padding: 1.5rem;">6</div>
          <div style="background-color: paleturquoise;  width: 370px; height: 258px; padding: 1.5rem;">7</div>
          <div style="background-color: purple;  width: 370px; height: 258px; padding: 1.5rem;">8</div>
          <div style="background-color: mediumaquamarine;  width: 370px; height: 258px; padding: 1.5rem;">9</div>
          <div style="background-color: mediumslateblue;  width: 370px; height: 258px; padding: 1.5rem;">10</div>

        </div>

      </div>
    </div>
  </div>

  <body>

Answer 1

要使此设计与flex-box一起使用，您必须在一个弹性框列中分组1,4,6,8。如果没有多个容器元素，使用弹性盒无法实现您正在寻找的结果。

如何制作包含不同尺寸物品的柔性盒库？

1 个答案: