html - 我如何定位这 4 个元素，如下所示

Question

我想让元素像页面上的 2 x 2 正方形一样，但它们只是在一行中列为 4，这里是一个 JS fiddle 。

https://jsfiddle.net/n2xscyr3/

.w3-card-4 {
  box-shadow: 0 6px 6px 0;
}

.w3-container {
  padding: 0.01em 16px
}

<div class="w3-container">
  <h2>Contact us</h2>
  <p>If you have any questions, complaints or feedback - feel free to contact the team at Potato&trade;.</p>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <br>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <br>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <br>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
</div>

我已经尝试了一些东西，但我无法弄清楚。我目前纯粹是为了好玩而编写代码，所以我不太擅长这类事情。

Answer 1

实现此目的的一种方法是使用 float: left;然后使用 clear: left;在每一个奇怪的 child 身上。此外，为了使此方法起作用，您需要删除 <br>在每个 .w3-card-4 之间标记您的标签.

JSFiddle

.w3-card-4 {
  box-shadow: 0 6px 6px 0;
  float: left;
}

.w3-card-4:nth-child(odd) {
  clear: left;
}

.w3-container {
  padding: 0.01em 16px
}

<div class="w3-container">
  <h2>Contact us</h2>
  <p>If you have any questions, complaints or feedback - feel free to contact the team at Potato&trade;.</p>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
  <div class="w3-card-4" style="width:15%">
    <img src="" alt="face" style="width:100%">
    <div class="w3-container">
      <h4><b>Someone</b></h4>
      <p>The title</p>
    </div>
  </div>
</div>