コンテナ内に3列ありますが、

Question

私は複数のdivを保持しています（約20個）。各行に3つのdivを配置したいので、このようなものに見えるようにします（divを流し続けます）。

これらの列を何らかの親divに置かずに中央に揃えるには、どのような方法が最適ですか？私はそれぞれ3列を持っているが、使用しているシステムではできないdivを使用すると、私はそれらを中心に置くことができます。何か案は？

Answer 1

簡単な例は次のようになります。

あなたが行制御するには、このいずれかを使用することができ、純粋なCSS：動的幅を取得するためにwidth: calc((100% - 60px)/3);と

.child:nth-child(3n+1) { 
    clear: both; 
} 

を。

.child { 
 
    background: white; 
 
    height: 40vh; 
 
    float: left; 
 
    margin: 0px 10px 10px 0px; 
 
    width: calc((100% - 60px)/3); 
 
    border: 5px solid black; 
 
} 
 

 
.child:nth-child(3n+1) { 
 
    clear: both; 
 
} 
 

 
.wrapper { 
 
    background: white; 
 
    border: 5px solid black; 
 
    display: inline-block; 
 
    width: calc(100% - 30px); 
 
    margin: 10px; 
 
    padding: 10px 0px 0px 10px; 
 
}

<div class="wrapper"> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
    <div class="child"></div> 
 
</div>

Answer 2

'最良' の方法は、IMOフレキシボックスを使用することです。あなたは親のdivなしと言うが、親のコンテナのdivのいくつかの種類を持っている必要があります。

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
.container { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
\t justify-content: space-between; 
 
\t max-width: 400px; 
 
\t margin: 0 auto; 
 
\t padding: 25px; 
 
\t border: 2px solid black; 
 
} 
 

 
.box { 
 
\t display: block; 
 
\t height: 160px; 
 
\t width: 100px; 
 
\t margin-bottom: 25px; 
 
\t border: 2px solid black; 
 
}

<div class="container"> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
\t <div class="box"></div> 
 
</div>