WordPressでtableっぽいデザインをfloat等で実現したい

Question

http://yasato.sakura.ne.jp/wp1/category/未分類/
このURLのWPを改良したいです。

マテリアルという無料テーマを使っているのですが、記事一覧の部分だけ
http://affinger.com/monseter-b/category/baby/
このブログのような形にしたいです。

divタグやdl dd dtタグなどを使って、Floatでサムネイル部分を左に寄せればいけるのかなと思ったのですが
divやddでくくった部分が、１行だけ右に置かれてそれ以降はそれらの下に配置されてしまいます。
てっきりくくった部分はtableのように１つの箱のような形で並ぶと思っていたので、予想外でした

いまいちピンとくるキーワードがわからず、ググってもあまり良い情報が得られませんでした

Stringerというこの方式を採用しているテーマのphpとstyle.cssを見ているのですが、いまいち理解出来ていません。

		<dl class="clearfix">
			<dt><a href="<?php the_permalink(); ?>">
					<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
						<?php the_post_thumbnail( 'thumbnail' ); ?>
					<?php else: // サムネイルを持っていないときの処理 ?>
						<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
					<?php endif; ?>
				</a></dt>
			<dd>
				<h3><a href="<?php the_permalink(); ?>">
						<?php the_title(); ?>
					</a></h3>

				<div class="blog_info <?php st_hidden_class(); ?>">
					<p><i class="fa fa-clock-o"></i>
						<?php the_time( 'Y/m/d' ); ?>
						&nbsp;<span class="pcone">
							<i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/>
							<?php the_tags( '<i class="fa fa-tags"></i>&nbsp;', ', ' ); ?>
          </span></p>
				</div>
				<div class="smanone2">
					<?php the_excerpt(); //抜粋文 ?>
				</div>
			</dd>
		</dl>

このテーマはphp部分はこんな感じです。

<dd></dd>で囲って、<dt>にFloat:leftをかけているのだと思いました。

ここにかかっている（と思われる）CSSは

/* タイトル名 */
#topnews dd h3 {
	font-size: 20px;
	line-height: 30px;
	margin-bottom: 5px;
}

#topnews dt {
	float: left;
	width: 100px;
}

#topnews dt img {
	width: 100%;
}

#topnews dd {
	padding-left: 110px;
}

#topnews dl {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #999;
}

#topnews dl:first-child {
	padding-top: 20px;
}

#topnews dl:last-child {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-style: none;
}

#topnews .clearfix dd h5 {
	font-size: 16px;
	font-weight: bold;
	padding: 0px;
	margin-bottom: 5px;
}

こんな感じです。#topnewsというID指定が、どこに使わているのかイマイチよくわからなかったのですが、見た感じサムネイルのdtにFloatをかけていたので、これかなと思いました。

もともとマテリアルの記事一覧部分のphpが

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo ""; } ?>
		<div class="thumb-box sub-color-background">
		<?php if(has_post_thumbnail()){ ?>	<!-- サムネあるかどうか -->
			<a href="<?php the_permalink() ?>">

			<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
			</a>
		<?php }else{ ?>
			<a href="<?php the_permalink() ?>" class="no-deco">
			<img src="<?php echo get_template_directory_uri(); ?>/images/no-img.png" alt="no image" title="no image" width="100" height="100" />
			</a>
		<?php } ?>
		</div><!-- .thumb-box -->
	<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">

			<div class="post-info">
			<p class="up-date"><span class="lsf">time </span><?php the_time('Y/m/d') ?></p>
			<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
			<?php get_template_part("sns_count") ?>
			<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
			</div><!-- .post-info -->
	</div><!-- .post -->

こんな感じなので、ここの<div class="thumb-box sub-color-background">にFloat:leftしてもうまく行きませんでした。
その結果が一番上のURLです。どうすれば２番めのURLのような形で改行（？）せずに表示できるのか知りたいです。

Answer 1

h3と.post-titleに clear が付いているからです。デベロッパーツールなどを利用すると比較的簡単に原因の調査/特定/改善が出来ますよ。

.up-date {
	float: none;
}
h3.post-title {
	clear: none;
}

【【初心者向け】GoogleChromeデベロッパーツールの使い方 | ネットマプラス】
http://media.net-marketing.co.jp/topics/system/20141104/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[worldrun]

ありがとうございます！WEBはこういうのがあるんですね、導入します。