2

How do i remove the inline-block space between two divs that are a part of the wordpress loop? They are supposed to sit side-by-side, each being 50% width. I realize I could change the width to 49% or use floats, but I would like to leave it this way if possible.

I know you normally can do it by eliminating the white space in the coding with comments as below:

<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>

This is my wordpress loop, and no matter where I put the comment, and still adds white space in the actual returned 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();?>

And this is what is showing up in Developer Tools:

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

I'm sure I'm just overlooking something easy, but any help would be appreciated. Thanks!

@Prusprus here it is straight from the source code:

<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

4

可能有另一种方法可以将其标记为已回答，不确定，但@Prusprus 在上面的评论中给了我解决方案。

我只需要在关闭 php 标记和 div 开头之间的代码开头删除一个换行符。

于 2013-10-10T20:22:52.203 回答
1

这里有两种方法

  1. 将父级的字体大小设置为 0，然后在inline-block元素上恢复它。

  2. 对最后一个 div 应用适当的边距。

演示 x 2

HTML

<div class="opt1">
    <div class="before-after"></div>
    <div class="before-after"></div>
</div>

<div class="opt2">
    <div class="before-after"></div>
    <div class="before-after"></div>
</div>

CSS

.opt1, .opt2 {    
    margin:10px;
    border:1px solid green;
}

.before-after {
    display:inline-block;
    background:lightgrey;
    width:50%;
    height:100px;
    font-size:16px
    font-size:1rem;
}

.opt1 {
     font-size:0;
}

.opt2 .before-after{
    vertical-align:top;
}

.opt2 .before-after:last-child {
    margin-left:-.25em;

}
于 2013-10-10T20:19:17.830 回答
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 回答