Question

我有div（类名：xyz）在其中插入小的4个div（类名：ax）。我需要垂直插入前两个div，第三个应该水平地插入第一个div，第四个应该垂直插入第三个div。但是所有的孩子都垂直出现在父母身边。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

.xyz {
  max-height: 450px;
  max-width: 500px;
}

.ax {
  height: 200px;
  width: 200px;
  margin: 0 50px 25px 0;
  background-color: #C0C0C0;
  float: left;
}

＆＃13;

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

＆＃13;

Answer 3

喜欢这个吗？

＆＃13;

.xyz {
  max-height: 450px;
  max-width: 500px;
}

.ax {
  height: 200px;
  width: 200px;
  margin: 0 50px 25px 0;
  background-color: #C0C0C0;
  float:left;
}

＆＃13;

<div class="xyz">
  <div class="ax"> </div>
  <div class="ax"> </div>
  <div style="clear:both"></div>
  <div class="ax"> </div>
  <div class="ax"> </div>
</div>

＆＃13;

Answer 4

我认为你正在寻找这个，尝试使用代码段

＆＃13;

.xyz {
  max-height: 450px;
  max-width: 500px;
  margin-right: -25px; /* newly added */
  margin-left: -25px; /* newly added */
}

.ax {
  height: 200px;
  width: 200px;
  margin: 0 25px 25px 25px;
  background-color: #C0C0C0;
  float:left; /* newly added */
}

＆＃13;

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

＆＃13;

与父div中的子div对齐问题

4 个答案: