我正在尝试使用高级自定义字段和硬代码重新创建设计。我使用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;
}
1条答案
按热度按时间u5i3ibmn1#
flex将处理具有该属性的项的直接子项,因此您只需要 Package 所有
.icon-item
变成.icon-wrapper
并将flex应用于:我会把它拿走
id="process-icon"
在任何多个项目上。。对多个元素使用类&对单个元素使用id(我通常只对javascript引用使用id)那么您的css将是: