php - Flex-Flow Column Wrap - 带有标题的图标
问题描述
我正在尝试使用高级自定义字段和硬代码重新创建设计。我正在使用 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;
}
解决方案
Flex 将使用该属性处理项目的直接子项,因此您只想将所有内容包装.icon-item
成 a.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 的类(我通常只将 ID 用于 javascript 参考)
那么你的CSS将是:
.icon-wrapper {
display: flex;
}
.icon-item {
}
推荐阅读
- android - Daniel Gindi 的图表库 - 为图表数据添加趋势线?
- reactjs - React native 响应原生 web
- docker - Hyperledger Fabric peer 显示错误:“listen tcp 127.0.0.1:9443: bind: address already in use”但仅在使用 docker-py 时
- svelte - 使用 Sveltekit 刷卡:没有“刷卡”
- machine-learning - K-最近邻算法给出不合适的错误
- python - 为什么“NONE”被附加到列表中?
- reactjs - 错误:expect(jest.fn()).toHaveBeenCalledTimes(expected)
- sql - ORACLE SQL:减去两个或多个连续行的日期
- flutter - share_plus 不共享文字flutter
- webkit - 使用 webkit 的剧作家无法加载资产