0

基本的に、ページに画像を含むブロックを表示するこのループがあります。クラスgallerypicには右側に20pxのマージンがあり、ルールもありますfloat:left;。問題は、3番目のdivが作成されるたびに新しいものから始まりますマージンがそこに押し込んでいるためです。したがって、理想的には、3 回目の投稿ごとにマージンをなくして、div などを適用したいと考えていますgallerypicright。

誰かがこれに対する解決策を持っているのだろうか？おそらく、3番目のマージンが発生するのを単に止める簡単なものでしょうか? ポスト間にきちんとしたギャップができるので、他の 2 つのマージンが必要です。

<?php 
            $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
            $archive_query = new WP_Query('cat=14&showposts=14&paged=' . $paged);
            $id = get_the_ID();

while ($archive_query->have_posts()) : $archive_query->the_post(); ?>

                     <div class="events">
        <div class="gallerypic"><div class="limerickguideblockheader"><p><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?>
        </div>
        <div class="gallerypiccontainer"><a href="<?php the_permalink(); ?>" >
         <?php echo get_the_post_thumbnail( $id, 'gallery-thumb', $attr ); ?> </a></div>
         </div> 
  </div>
            <?php endwhile; ?>

編集: 絵は 1000 語を描きます。ここまでのリンクと 3 つの投稿があります... http://limerickfc.hailstormcommerce.com/cms/?page_id=2466

可能であれば、CSS による方法がさらに良いでしょう。乾杯エイドリアン

4

4 に答える 4

4

以下のコードを試してください。

<style>
.gallerypicright {
  margin: 0;
}
</style>
...
<?php
$count = 0;
while ($archive_query->have_posts()) : $archive_query->the_post(); 
  $count++;
  $third_div = ($count%3 == 0) ? 'gallerypicright' : '';
?>
...
<div class="gallerypic <?php echo $third_div; ?>">
于 2012-10-05T09:55:22.443 に答える
2

純粋な CSS ソリューションが必要な場合は、使用してみてください

.gallerypic:nth-child(3n + 1) {
    margin:0;
}

n要素ごとに上がるカウンターです。カウンター ( n) は から始まります0が、ページの要素はから始まります1。したがって、3n + 1すべて3 * n + 1の要素の平均は次のようになります。

要素1 (3 * 0 + 1)、4 (3 * 1 + 1)、7 (3 * 2 + 1) など。

このソリューションは CSS3 でのみ使用できるため、古いブラウザーにはありません。(参照: http://caniuse.com/#search=nth-child )。

はすべての子を:nth-childカウントするため、イベントを div にグループ化する必要があります。

<div class="container">
    <div class="gallerypic">...</div>
    <div class="gallerypic">...</div>
    <div class="gallerypic">...</div>
</div>
于 2012-10-05T10:14:39.107 に答える
0

その後、ループで投稿をカウントする必要があります。投稿の合計数を 3 ずつモジュール化し、次のような特定の投稿に適切なクラスを適用する必要があります。

if ($cnt%3 == 0){ $class = '右'}

于 2012-10-05T10:20:12.583 に答える
0

コンテナにバランスの取れた負の右マージンを追加するというトリックを試すかもしれません。そのため、あなたの場合、おそらく

div.events { margin-right: -20px; }

または、わずかにパッチのあるブラウザー サポート (IE9+ のみ、他のブラウザーではより優れていると思います) に対処できる場合は、おそらく nth-child を使用してスタイルを設定します。

.gallerypic:nth-child(3n+3) { margin-right: 0px; }
于 2012-10-05T10:20:49.327 に答える