如何删除作为wordpress循环一部分的两个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>
<!---->
可能有一种
不同的方法可以将其标记为已回答,不确定,但@Prusprus上面的评论中给了我解决方案。
我只需要在结束 php 标签和div 开头之间的代码开头删除换行符。
浮动内联块元素的传统方式可以纠正这一点,但由于它不受欢迎,还有另一种方法。
您还可以将父元素的字母间距设置为 -0.31em 来解决此问题,并在div 本身中将字母间距设置回正常。我将在一秒钟内设置一个 jsfiddle。
法典
.row {
letter-spacing:-0.31em;
}
.col {
letter-spacing:normal;
display:inline-block;
width:50%;
}
祝你好运!
这里有两个方法
-
将父级的字体大小设置为 0,然后在
inline-block
元素上还原它。 -
将适当的边距应用于最后一个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;
}