2

wordpress ループの一部である 2 つの div 間のインライン ブロック スペースを削除するにはどうすればよいですか? それらは、それぞれが 50% の幅で並んで座るはずです。幅を 49% に変更したり、フロートを使用したりできることはわかっていますが、可能であればこのままにしておきたいと思います。

以下のように、コメントを使用してコーディングの空白を削除することで、通常はそれを行うことができます。

<div class="before-after">
  <img src="images/ba_01.jpg" alt="">
  <h4>Frick TDSH 355XL<br><small>Slide Valve and Rotor Housing</small></h4>
</div><!-- this comment here eleminates the spacing 
--><div class="before-after">
  <img src="images/ba_02.jpg" alt="">
  <h4>Frick NGC300 Gear Plate</h4>
</div>

これは私の wordpress ループであり、コメントをどこに置いても、実際に返される html に空白が追加されます。

<?php 
  $my_query = new WP_Query(
    array( 
      'cat' => '2',             
    ) 
  );

  while ( $my_query->have_posts() ) : $my_query->the_post();
?>  
<div class="before-after">
  <?php 
    if ( has_post_thumbnail() ) { 
      the_post_thumbnail();
    } 
  ?>
  <h4><?php the_title(); ?><br><small><?php the_content(); ?></small></h4>
</div><!-- --><?php endwhile;?><?php wp_reset_postdata();?>

そして、これは開発者ツールに表示されているものです:

<div class="before-after">...</div>
<!---->
<div class="before-after">...</div>
<!---->

簡単なことを見落としているだけだと思いますが、何か助けていただければ幸いです。ありがとう!

ここの@Prusprusは、ソースコードから直接です:

<div class="before-after">
    <img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_02.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick NGC300 Gear Plate" />
    <h4>Frick NGC300 Gear Plate<br><small></small></h4>
</div>
<!---->
<div class="before-after">
    <img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_01.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick TDSH 355XL" />
    <h4>Frick TDSH 355XL<br><small><p>Slide Valve and Rotor Housing</p>
    </small></h4>
</div>
<!---->
4

3 に答える 3

1

インラインブロック要素をフローティングする従来の方法でこれを修正できますが、これは好ましくないため、別の方法があります。

親要素の文字間隔を -0.31em に設定してこれを解決し、div 自体で文字間隔を通常に戻すこともできます。すぐに jsfiddle をセットアップします。

コード

.row {
     letter-spacing:-0.31em;
}
.col {
     letter-spacing:normal;
     display:inline-block;
     width:50%;
}

幸運を!

于 2013-10-10T20:07:37.833 に答える