Flexbox布局在循环中具有独特的第一个孩子

时间:2017-05-31 12:09:52

标签: css css3 flexbox

我想知道是否可以安排盒子,以便右边的底部两个填充空白区域。它们是由循环生成的帖子,第一个帖子是唯一的,并且使用第一个子选择器设置样式,因此我们无法定位单个帖子。

flex layout

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

0 个答案:

没有答案