html - 父 div 中子 div 的对齐问题

Question

我有 div(class name:xyz) 在其中插入小的 4 div (class name:ax )。 我需要垂直插入前两个 div，第三个应该水平插入第一个，第四个应该垂直插入第三个。 但是所有的子项都垂直出现在父项的旁边。

.xyz {
  max-height: 450px;
  max-width: 500px;
}

.ax {
  height: 200px;
  width: 200px;
  margin: 0 50px 25px 0;
  background-color: #C0C0C0;
}

<div class="xyz">
  <div class="ax"> </div>
  <div class="ax"> </div>
  <div class="ax"> </div>
  <div class="ax"> </div>
</div>

Answer 1

您可以使用 CSS3 多列布局，在您的情况下为 column-count: 2;，此属性适用于 following browsers 。

.xyz {
  max-height: 450px;
  max-width: 500px;
  column-count: 2;
  -webkit-column-count: 2;
}

.ax {
  height: 200px;
  width: 200px;
  margin: 0 50px 25px 0;
  background-color: #C0C0C0;
  display:inline-block;
}

<div class="xyz">
  <div class="ax">1</div>
  <div class="ax">2</div>
  <div class="ax">3</div>
  <div class="ax">4</div>
</div>