親div内の子divとの整列問題

Question

div（クラス名：xyz）に小さな4 div（クラス名：ax）を挿入しました。 最初の2つのdivを縦に挿入する必要があります.3番目のdivは横に1番目になり、4番目のdivは3番目に垂直になるはずです。 しかし、すべての子供たちは、親の側面に垂直に現れています。

.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

あなたはあなたのケースでcolumn-count: 2;なりますCSS3複数列レイアウトを使用することができ、このプロパティは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>

Answer 2

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

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

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

は

Answer 3

？

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

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

<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>

Answer 4

私は、私はあなたが望むすべてを1として表示divをすることであると考えていスニペット

.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 */ 
 
}

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