Question

基本上我试图编写代码：

我非常确定它可以使用Flex构建，但我似乎无法让它工作（并且能够快速响应）。相应地，将较大屏幕尺寸的主要大型左侧块下方的4个块移动是很好的。

我在WP循环中构建它，但是对它的那部分非常熟悉，只是无法使实际的HTML / CSS结构起作用。

这是我迄今为止尝试过的事情（并且失败了！）：

HTML /循环

global $wp_query;
$wp_query = new WP_Query( $args );
if ( have_posts() ) : 
    echo '<div class="featured-posts-query">';
    while ( have_posts() ) : the_post(); ?>


            <div class="featured-posts">
                    <div class="featured-posts-image">
                        <?php the_post_thumbnail("thumbnail");?>
                    </div>
                    <div class="posts-category">
                    <?php $postType = get_post_type_object(get_post_type());
if ($postType) {
echo esc_html($postType->labels->singular_name);
} ?>
                    </div>

                    <div class="featured-posts-title">
                        <a href="<?php the_permalink(); ?>">
                            <h3> 
                                <?php echo mb_strimwidth(get_the_title(), 0, 40, '...'); ?>
                            </h3>
                        </a>
                    </div>
                </a>
            </div>


    <? endwhile; 
    echo '</div>';
    do_action( 'genesis_after_endwhile1' );
endif;
wp_reset_query();
}

CSS

.featured-posts-query {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 550px;
  width: 102%;
}

.featured-posts:nth-child(1) {
  flex: 0 0 100%;
  width: 53%;
}

.featured-posts:nth-child(n+2) {
  flex: 0 0 49%;
  width:20%;
}

Answer 1

如果你可以使用网格，那就很容易了。

HTML：

<div class="grid">
  <div class="item item1"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS：

.item {
  width: 100%;
  min-height: 300px;
  background: #ddd;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px;
}

.item1 {
  grid-row: span 2;
}

https://codepen.io/jonschmitz/full/LmaJmj

构建一个3列，2行弹性网格布局，第一个项目跨越两行

1 个答案: