###■やりたいこと
4つの要素が横一列に並ぶ状態を、2列×2行とか、4列×2列にしたいです。
このような並び方↓です。
このようにするためのCSSは、下記にあるいまの状態の【style.css】をどのように変えればよさそうでしょうか?
具体的なコードでなく、ヒントでもうれしいです。
よろしくお願いいたします。
###■いまの状況
このように関連記事が4つ、横一列で並んでいます。
https://jsfiddle.net/un11o6s5/1/
コードは下記のように書いています。
【single.php】
php
1<!-- 関連記事 --> 2<div class="test1rand-wrap"> 3<?php 4 global $post; 5 $term = array_shift(get_the_terms($post->ID, 'test1-category')); 6 $args = array( 7 'numberposts' => 4, //4件表示 8 'post_type' => 'test1', //カスタム投稿タイプ名 9 'taxonomy' => 'test1-category', //タクソノミー名 10 'term' => $term->slug, //ターム名 11 'orderby' => 'rand', //ランダム表示 12 'post__not_in' => array($post->ID) //表示中の記事を除外 13 ); 14?> 15 16<ul class="test1rand"> 17<?php $myPosts = get_posts($args); if($myPosts) : ?> 18<?php foreach($myPosts as $post) : setup_postdata($post); ?> 19 20<li class="rand"> 21<a href="<?php the_permalink(); ?>"> 22<p class="radsumb"><?php the_post_thumbnail(); ?></p> 23<?php the_title(); ?></a> 24</li> 25<?php endforeach; ?> 26<?php else : ?> 27</ul> 28 29<p>関連アイテムはまだありません。</p> 30<?php endif; wp_reset_postdata(); ?> 31</div>
【style.css】
css
1/*-- 関連記事 --*/ 2ul.test1rand { 3 display:table; 4 table-layout:fixed; 5 margin-bottom: 60px; 6 margin-left: 0px; 7} 8ul.test1rand li { 9 display:table-cell; 10 padding: 5px; 11 line-height: 120%; 12} 13ul.test1rand li a { 14 display:block; 15 text-decoration:none; 16 font-weight: bold; 17} 18.rand img:hover { 19 opacity: 0.8; 20 transition: 0.2s; 21} 22.rand { 23 width: 25%; 24} 25.ft-kiji { 26 background: #F3F3F3; 27 border-left: 5px solid #4285F4; 28 padding: 15px; 29}
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/24 07:17
退会済みユーザー
2016/10/24 08:13
退会済みユーザー
2016/10/25 05:59