Clex框问题使用PHP,ACF和CSS

有原因,为什么此代码不使用Flex Box目前我想去参加交替的网格模式。允许前两个项目坐在彼此旁边,第三项占据全宽。我不认为我很远,但我会感谢任何人能给我的帮助。我附上了下面使用的代码。

谢谢你!

<section id="about-sect">
<div class="wrapper">
    
<?php if ( have_rows( 'about_me' ) ) : ?>
    <?php while ( have_rows( 'about_me' ) ) : the_row(); ?>
    <div class="item">
        <?php $portrait = get_sub_field( 'portrait' ); ?>
        <?php if ( $portrait ) : ?>
            <img id="becs-portrait" src="<?php echo esc_url( $portrait['url'] ); ?>" alt="<?php echo esc_attr( $portrait['alt'] ); ?>" />
        <?php endif; ?>
    </div>
    <div class="item" id="founded-by">
        <h1><?php the_sub_field( 'about_header' ); ?></h1>
        <p><?php the_sub_field( 'about_description_paragraph' ); ?></p>
    </div>
    <div class="item">
        <?php the_sub_field( 'solution' ); ?>
    <?php endwhile; ?>
    </div>
<?php endif; ?>
    
</div>
<section>
/* About Me Section */

#about-sect {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.item {
    width: 48%;
    height: auto; 
    margin-bottom: 2%;
}

.item:nth-child(3n) {
    width: 100%;
  }

#becs-portrait {
    width: 300px;
    border: solid #000000 10px;
    border-radius: 50px;
}

#founded-by {
    width: 300px; 
}

#founded-by h1 {
    border-bottom: solid #FF00AD 10px;
}

/* End of About Me Section */

you're not far just one thing #about-sect不是物品的容器,.wrapperjuan eizmendi

回答 0