WordPress ループ内で決められた数毎にタグを囲む

グリッドを使って記事を横並びに並べたい場合に、単純にループさせちゃうと margin をいじったり、いろいろと CSS を調整しないといけなくなるので面倒くさい。

なので、例えば3つ毎に横に並べたい場合はこんな風にすると楽。

 

こんな風に出力されます。

 

JS でも出来るけど、こんな感じでやっといたほうがスマートですね。

ちなみに、ul 1つで CSS で解決するには、こんな感じでネガティブマージン使うやり方が一番定番かな。もしくは display: inline-block; とか nth-child を使う方法もありますね。

See the Pen sCweJ by johnykei (@johnykei) on CodePen.

 

参考記事:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">