中心容器內的3列，但允許

Question

我有一個容器，可容納多個div，大約20個。我想在每一行放3個div，因此它看起來像這樣（divs只是繼續流動）。

什麼是居中這些列沒有他們在某種父div的最佳方式？如果我使用了一個分別佔據3列的div，但是我使用的系統不行，我可以將它們居中。有任何想法嗎？

Answer 1

一個簡單的例子是：

純CSS，你可以用這個來控制行：

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

與width: calc((100% - 60px)/3);動態獲取的寬度。

.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是使用Flexbox的。你說沒有父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>