flex flow列 Package -带标题的图标

rpppsulh  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(300)

我正在尝试使用高级自定义字段和硬代码重新创建设计。我使用flex-box作为css,希望文本上方的图标有一行6列。
目前,我的代码将图标放在左边,文本放在旁边,而不是先读一列再读一行。
谢谢你的帮助:)。。。

<div class="wrapper">
<section id="process">
<?php if ( have_rows( 'procces' ) ) : ?>
    <?php while ( have_rows( 'procces' ) ) : the_row(); ?>
        <h1><?php the_sub_field( 'process_header' ); ?></h1>
        <p><?php the_sub_field( 'process_description' ); ?><p>
        <?php if ( have_rows( 'icon' ) ) : ?>
            <?php while ( have_rows( 'icon' ) ) : the_row(); ?>
            <div id="process-icon" class="icon-item">
                <?php $icon_image = get_sub_field( 'icon_image' ); ?>
                <?php if ( $icon_image ) : ?>
                    <img src="<?php echo esc_url( $icon_image['url'] ); ?>" alt="<?php echo esc_attr( $icon_image['alt'] ); ?>" />
                <?php endif; ?>
                <h2><?php the_sub_field( 'icon_description' ); ?></h2>
            <?php endwhile; ?>
        <?php else : ?>
            <?php // no rows found ?>
        <?php endif; ?>
        </div>
    <?php endwhile; ?>
<?php endif; ?>
</section>
</div>
.icon-item {
    display:flex;
    flex-flow: column row;
}
u5i3ibmn

u5i3ibmn1#

flex将处理具有该属性的项的直接子项,因此您只需要 Package 所有 .icon-item 变成 .icon-wrapper 并将flex应用于:

<?php if ( have_rows( 'icon' ) ) : ?>
  <div class="icon-wrapper">
  <?php while ( have_rows( 'icon' ) ) : the_row(); ?>
    <div class="icon-item">
    <?php $icon_image = get_sub_field( 'icon_image' ); ?>
      <?php if ( $icon_image ) : ?>
         <img src="<?php echo esc_url( $icon_image['url'] ); ?>" alt="<?php echo esc_attr( $icon_image['alt'] ); ?>" />
    <?php endif; ?>
    <h2><?php the_sub_field( 'icon_description' ); ?></h2>
    </div><!-- close .icon-item-->
  <?php endwhile; ?>
  </div><!--- close .icon-wrapper-->
<?php else : ?>
  <?php // no rows found ?>
<?php endif; ?>

我会把它拿走 id="process-icon" 在任何多个项目上。。对多个元素使用类&对单个元素使用id(我通常只对javascript引用使用id)
那么您的css将是:

.icon-wrapper { 
  display: flex;
}

.icon-item { 

}

相关问题