wordpressトップページ・ブログ記事一覧の表示を変えられません。

Question

Wordpressトップページを固定ページとし、その中でブログ記事を最新3件表示しています。
タイトル
日付
サムネイル
本文

と縦に並んでしまいます。これを添付画像のイメージにしたい（カテゴリーは無視してください）のですが、どこをどう直していいのか分からず途方にくれています。

色々試してみて近そうだったのが

<div class="per_content"> に対して、display: flex;をすれば効果はあるものの、 日付・タイトルに対して画像が回り込む形となり、意図と微妙に違っています。

解決法を教えていただけますと幸いです。よろしくお願いいたします。

<!-- 新着記事 -->
<div id="blog">
<h2>新着記事</h2>
<?php
$posts = get_posts( array(
));
if( $posts ):
?>
<dl class="blog_content">
<?php
foreach( $posts as $post ):
setup_postdata( $post );
?>

<div class="per_content">
<dt> <?php the_time('Y年n月j日'); ?></dt>
<dd><a href="<?php the_permalink(); ?>"><h4><?php the_title(); ?></h4></a></dd>

<!-- サムネ表示 -->
<?php if(has_post_thumbnail()) : ?>
<?php the_post_thumbnail(array(200, 200)); ?>
<?php else: ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/noimage.png" width="200" height="200">
<?php endif; ?>
<!-- サムネ表示 end -->

<?php the_content(); ?>

</div>

<?php
endforeach;
wp_reset_postdata();
?>

</dl>
<?php else: ?>
<p>投稿はありません</p>
<?php endif; ?>

</div>
<!-- 新着記事 end -->

/* blog */

#blog {
margin: auto;
}

.blog_content {
width:1100px;
margin: auto;
}![イメージ説明](f4a6c0ff7ca00fbe2ea72431632dbacf.jpeg)

Answer 1

実現したいレイアウトに対して
文書構造が合ってない気がするけど
まあできないことはない

@media(min-width:1100px){
	.blog_content{
		width:1100px;
		margin:auto;
		position:relative;
		min-height:200px;
		padding:20px;
		padding-right:240px;
		box-sizing:border-box;
	}
	.blog_content>img{
		position:absolute;
		top:20px;
		right:20px;
	}
}

でもスマホ版のレイアウトのためには
この構造じゃないとダメとかみたいな理由がない限りは
要素の順番とかまとまりとかを考え直した方が後々のためかな

HTMLの構造が深くないってのはいいことではあるけど
そのせいでCSSのコードが肥大する結果になるのではよろしくない

Comments

[chinki]

遅くなりましたが、ご回答ありがとうございました。大変参考になりました。