我的wordpress循环以奇怪的格式输出帖子。
当我有3个帖子时,所有内容都是内联的。但是,现在当我有5条帖子时,它们以一种奇怪的方式显示(请参阅所附图像)。箭头显示了我希望该帖子如何显示。
这是页面的html&php
<div class="container">
<div class="row">
<?php
$args1 = array( 'post_type' => array('case_studies'), 'order' => 'DESC', 'posts_per_page' => 30, 'orderby' => 'date' );
$loop = new WP_Query( $args1 );
while ( $loop->have_posts() ) {
$loop->the_post();
$feat_image = wp_get_attachment_url( get_post_thumbnail_id($loop->ID));
?>
<div class="col-sm-4">
<a href="<?php the_permalink() ?>" class="blog_blocks">
<div class="b_image">
<img src="<?php echo get_the_post_thumbnail_url(); ?>"/>
</div>
<div class="b_h_sec">
<h2><?php the_title(); ?></h2>
<p><?php echo wp_strip_all_tags( get_the_excerpt(), true ); ?></p>
<span class="r_m">Read More</span>
</div>
</a>
</div>
<?php } ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
您可以在此处here看到实际的页面-也许在Chrome工具中看到CSS会有所帮助。
谢谢:)
答案 0 :(得分:2)
这是因为这些块都具有float: left
,并且第三个块的高度比前一个块小,所以第四个块也浮动在第二个块的左侧。这就是花车的本质。
一种解决方案是使用固定的常用高度。另一种方法是在第四个块中添加clear: left
,但这没有响应-即使有足够的空间容纳它,它也会始终将其移动到新行当前行。
一个更安全的工作解决方案是在容器上使用display: flex
,并添加flex-wrap: wrap
。
答案 1 :(得分:1)
在您的div上:
<div class="row">
添加“ d-flex ”类:
<div class="row d-flex">
在 d-flex 类上,添加以下属性CSS:
.d-flex {
display: flex;
flex-wrap: wrap;
}
享受! ;)