トップページの画像と記事を横に並べて表示したい。

(@henlykun)

サイドバーの横のフロントページに投稿記事のタイトルと内容をphpで画像をプラグインのQF-GetThumbで表示しています。これらの配置が現在縦に配置されており、これを横に
並べて表示したいと思っているのですがうまくいきません。
なかなか検索してもヒントまでたどり着けずにいる状態です。

一応box配置になると思いcssでfloatをleftにしているのですが。。

<div id="container">
<div class="item">
<?php query_posts('posts_per_page=5'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a 　">

<p class="toppoint"><?php the_title(); ?></p>
<?php echo the_qf_get_thumb_one('width=200'); ?></a>
<?php echo my_excerpt(50); ?>

<?php endwhile; endif; ?>
	<?php wp_reset_query(); ?>
</div>
</div>

CSSではこのようにしています。

.container {
overflow: hidden;
}

/* clearfix */
.container:before,
.container:after {
content: "";
display: table;
}

.container:after {
clear: both;
}

.item{
width:210px;
margin:10px;
float:left;
background-color:#fff;
color:#333333;
}

7件の返信を表示中 - 1 - 7件目 (全7件中)

nobita
(@nobita)

10年、 6ヶ月前

こんにちは

個別の投稿を、フロートで横並べするなら、

<div class="item">...</div>は　while loopの中にないとダメではないかと思います。
トピック投稿者 henlykun
(@henlykun)

10年、 6ヶ月前
nobita様
ご指示頂きましてありがとうございます。
指示通り<div class=”item”>をwhile loopの中に書き換えたら横に表示ができました。

ただなぜか配置がサイドバーの下に表示されてしまいました。
```
#wrap{
	margin-top: 60px;
	/* margin-left: 225px; */

}
#main{
	width: 650px;
}
#sidebar {
	float: left;
        position:relatvie;
	/* top: 60px; */
	/* left: 0px; */
	width: 200px;
        /* height: auto; */
	padding: 20px;
}
#masonry-wrap {
   float: left;
}

.container {
overflow: hidden;
}

/* clearfix */
.container:before,
.container:after {
content: "";
display: table;
}

.container:after {
clear: both;
}

.item{
width:210px;
margin:10px;
float:left;
background-color:#fff;
color:#333333;
}
```
CSSはこのように記述しております。お分かりいただけるかたいらっしゃいましたらお助けいただけると嬉しいです。
nobita
(@nobita)

10年、 6ヶ月前

</div>も、ループの中に入ってますか？
入っていれば、
ループの外に、</div>が2個あるという事はありませんか？
トピック投稿者 henlykun
(@henlykun)

10年、 6ヶ月前
nobita様

お答えいただきありがとうございます。
確認したのですが、</div>も中に入っております。
</div>は外に二つあるのですが、別の<div>があるのでそこは問題ないと思います。
試しに消してはみましたが、効果はありませんでした。ちなみ現在のindex.phpは
```
<?php get_header(' '); ?>

<div id="masonry-wrap">

<div id="container">
<?php query_posts('posts_per_page=5'); ?>
	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<div class="item ">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a 　">

<p class="toppoint"><?php the_title(); ?></p>

<?php echo the_qf_get_thumb_one('width=200'); ?></a>
<?php echo my_excerpt(50); ?>
</div>

<?php endwhile; endif; ?>
	<?php wp_reset_query(); ?>

</div>

</div>
```
このようになっています。何か方法はありますでしょうか？？
トピック投稿者 henlykun
(@henlykun)

10年、 6ヶ月前
いろいろ試していたらindex.phpの<div id=”masonry-wrap”>を削除したら
無事、サイドバーの横にサムネイルの画像が並びました。
ただ並び方が変でして5つの投稿記事のサムネイル画像が並んでいるのですが、
```
1.2.3
    4
5
```
というような不思議な並び方になってしまいます。ブラウザの幅を変えると表示は普通なのですが、何か原因があるのでしょうか？
nobita
(@nobita)

10年、 6ヶ月前

多分、それぞれのボックスの高さがちょっと違うため、（2が高め）で4が引っかかっているんじゃないかと思います。
heightを指定して、揃えてみてください

トピック投稿者 henlykun
(@henlykun)

10年、 6ヶ月前

nobita様

ご指示いただいた通りやったら揃ってできました。
本当にありがとうございました。

7件の返信を表示中 - 1 - 7件目 (全7件中)

トピック「トップページの画像と記事を横に並べて表示したい。」には新たに返信することはできません。

トピックタグ

表示