我想知道是否可以安排盒子,以便右边的底部两个填充空白区域。它们是由循环生成的帖子,第一个帖子是唯一的,并且使用第一个子选择器设置样式,因此我们无法定位单个帖子。
我的CSS。
.section-news-content{
display: flex;
flex-wrap: wrap;
justify-content:flex-end;
align-content: flex-end}
.section-news-content article:first-child{
padding: 0px;
max-height: 900px;
}
.section-news-content article{
width:33.33%;
padding: 0 0 20px 20px;
overflow: hidden;
max-height: 450px;
}
.section-news-content article:first-child .feat-image{height: 400px}
.section-news-content article .feat-image{height: 200px}
.section-news-content article:first-child .post-text{height:500px}
.section-news-content article .post-text{height: 250px}
HTML
<div class="section-content section-news-content">
<!----LOOP IS HERE----->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="excerpts">
<div class="feat-image">
<?php the_post_thumbnail(); ?>
</div>
<div class="post-text">
<header class="entry-header">
<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
</header><!-- .entry-header -->
<div class="entry-content">
<span class="entry-date"><?php echo get_the_date(); ?></span>
<span class="entry-text">
<?php
the_excerpt();
?>
</span>
</div><!-- .entry-content -->
<!--//<?php if ( get_edit_post_link() ) : ?>
<footer class="entry-footer">
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */
esc_html__( 'Edit %s', 'recfishwa' ),
the_title( '<span class="screen-reader-text">"', '"`</span>', false )`
),
'<span class="edit-link">',
'</span>'
);
?>
</footer><!-- .entry-footer -->
<?php endif; ?>
</div>
</div>
</article><!-- #post-## -->
</div>