使用css對齊動態生成的元素

Question

你好傢伙我的元素有一個小問題。我正在動態獲取這些元素，並且想將它們呈現爲4列布局。問題是我無法將它們包裹在div和div之間，只是顯示內聯塊並向左浮動，因爲它們就像這樣分開。

<section data-field="box-image"> 
    <img 
     src="" 
     width="160" height="160" alt=""> 
</section> 
<section data-field="box-content"> 
    <h3>Aquarius</h3> 
    <p>20 January&nbsp;- 18 February</p> 

</section> 
<section data-field="box-image"> 
    <img 
     src="" 
     width="160" height="160" alt=""> 
</section> 
<section data-field="box-content"> 
    <h3>Pisces</h3> 
    <p>19 February&nbsp;- 20 March</p> 
</section> 

所以它表明這樣的：

，但我想要的是讓他們這樣的：

其實我想過使用jQuery包裹它們或JavaScript，但可以我這樣做使用CSS？

這是怎麼這個網站正在生成到我的DOM： {{#each infoContent作爲|項目|}}

<div class="col-md-12 boxes-container"> 

        {{{item.box}}} 


       </div> 

       {{/each}} 

所以這item.box產生我問有關的代碼。

簡單我想包裝每個盒子圖像和盒子內容在一個div中，所以我可以把一些CSS放在它們上面，或者如果有任何其他方式在我的圖像中呈現它們會非常好看。

Answer 1

使用Flexbox Columns使用position和flex

section:nth-child(2) { 
 
    position: absolute; 
 
    top: 160px; 
 
    left: 0; 
 
    width:160px; 
 
} 
 
.section-block { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: flex-start; 
 
    align-items: center; 
 
    align-content: center; 
 
    position: relative; 
 
    width: 350px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 
section:nth-child(4) { 
 
    position: absolute; 
 
    top: 160px; 
 
    right: 0; 
 
    width:160px; 
 
} 
 
section:nth-child(1) { 
 
    margin-right: 30px; 
 
}

<div class="section-block"> 
 

 
<section data-field="box-image"> 
 
    <img 
 
     src="" 
 
     width="160" height="160" alt=""> 
 
</section> 
 
<section data-field="box-content"> 
 
    <h3>Aquarius</h3> 
 
    <p>20 January&nbsp;- 18 February</p> 
 

 
</section> 
 
<section data-field="box-image"> 
 
    <img 
 
     src="" 
 
     width="160" height="160" alt=""> 
 
</section> 
 
<section data-field="box-content"> 
 
    <h3>Pisces</h3> 
 
    <p>19 February&nbsp;- 20 March</p> 
 
</section> 
 

 
</div>

試試這個代碼

section { 
 
    width: 160px; 
 
    height: 160px; 
 
    text-align: center; 
 
} 
 
.section-block { 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    height: 320px; 
 
    width: 320px; 
 
    margin: 0 auto; 
 
} 
 
section:nth-child(1) { 
 
    margin-right: 20px; 
 
}

<div class="section-block"> 
 

 
<section data-field="box-image"> 
 
    <img 
 
     src="" 
 
     width="160" height="160" alt=""> 
 
</section> 
 
<section data-field="box-content"> 
 
    <h3>Aquarius</h3> 
 
    <p>20 January&nbsp;- 18 February</p> 
 

 
</section> 
 
<section data-field="box-image"> 
 
    <img 
 
     src="" 
 
     width="160" height="160" alt=""> 
 
</section> 
 
<section data-field="box-content"> 
 
    <h3>Pisces</h3> 
 
    <p>19 February&nbsp;- 20 March</p> 
 
</section> 
 

 
</div>

使用column-count

section { 
 
    width: 160px; 
 
    height: 160px; 
 
    text-align: center; 
 
    display: inline-block; 
 
} 
 
.section-block { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    -webkit-column-gap: 40px; 
 
    -moz-column-gap: 40px; 
 
    column-gap: 40px; 
 
    width: 320px; 
 
    margin: 0 auto; 
 
}

<div class="section-block"> 
 

 
<section data-field="box-image"> 
 
    <img 
 
     src="" 
 
     width="160" height="160" alt=""> 
 
</section> 
 
<section data-field="box-content"> 
 
    <h3>Aquarius</h3> 
 
    <p>20 January&nbsp;- 18 February</p> 
 

 
</section> 
 
<section data-field="box-image"> 
 
    <img 
 
     src="" 
 
     width="160" height="160" alt=""> 
 
</section> 
 
<section data-field="box-content"> 
 
    <h3>Pisces</h3> 
 
    <p>19 February&nbsp;- 20 March</p> 
 
</section> 
 

 
</div>

Answer 2

用div包裝圖像和文本。

div { 
 
    display: inline-block; 
 
    width: 45%; 
 
    text-align: center; 
 
}

<div> 
 
    <section data-field="box-image"> 
 
    <img src="" width="160" height="160" alt=""> 
 
    </section> 
 
    <section data-field="box-content"> 
 
    <h3>Aquarius</h3> 
 
    <p>20 January&nbsp;- 18 February</p> 
 

 
    </section> 
 
</div> 
 
<div> 
 
    <section data-field="box-image"> 
 
    <img src="" width="160" height="160" alt=""> 
 
    </section> 
 
    <section data-field="box-content"> 
 
    <h3>Pisces</h3> 
 
    <p>19 February&nbsp;- 20 March</p> 
 
    </section> 
 
</div>