オリンピックサークルに類似したデザインの画像をCSS

Question

それぞれのオブジェクトにカスタムクラスを作成せずにどのように作成できますか？私はwoocoomerceウィジェットのCSSでそれを行う必要があります。 HTMLコンテンツではありません。 Here

Answer 1

あなただけのdiv、別のdivでダウン2内トップ3を宣言するために持っているので、あなたはjustify-content: space-around;またはjustify-content: space-betweenを追加することができます。

Answer 2

.row { 
 
    display: flex; 
 
    justify-content: space-around; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="product"><img src="http://placehold.it/150x200"></div> 
 
    <div class="product"><img src="http://placehold.it/150x200"></div> 
 
    <div class="product"><img src="http://placehold.it/150x200"></div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="product"><img src="http://placehold.it/150x200"></div> 
 
    <div class="product"><img src="http://placehold.it/150x200"></div> 
 
    </div> 
 
</div>