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を使ってこれをしますか？

これは、このHTMLがDOMに私に生成されている方法です。 {{#each infoContentとして|アイテム|}}

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

        {{{item.box}}} 


       </div> 

       {{/each}} 

ので、このitem.boxは私が求めていたコードを生成します。

シンプルなので、私はそれらの上にいくつかのCSSを置くことができるように、または私のイメージのようにそれらを提示するための他の方法は本当にそれを読むことが良いだろうdivの各ボックスイメージとボックスコンテンツをラップしたい。

Answer 1

positionとflexFlexbox Columnsを使用して

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>