两列中继器字段高级自定义字段

时间:2019-05-08 19:53:16

标签: php css wordpress advanced-custom-fields

我是ACF的新手,并且想使用转发器字段来创建两列的行。它按我的方式运行(两列,两等分)。我希望每一列都以与另一列相同的高度开始,因此我设置了高度。但是我想确保我正在使用最佳做法...这是我按照您建议的方式写的吗?我觉得可能有更好的方法。

谢谢。

PHP

<div class="bg-white">
     <div class="dib mw9 center">

      <?php

      if( have_rows('faq') ):
          while ( have_rows('faq') ) : the_row(); ?>

            <div class="parent">
              <h4><?php the_sub_field('question'); ?></h4>
              <p><?php the_sub_field('question_answer'); ?></p>
            </div>

          <?php endwhile;
          else :
          endif;
      ?>

      </div>
 </div>

CSS

.parent {
    display: inline-block;
    height: 240px;
    width: 50%; 
    float: left;
    padding: 48px 24px;
}

1 个答案:

答案 0 :(得分:0)

如果您可以向包装的div中添加一个附加类(class =“ dib…”),则将其称为“ .parent-wrapper”,则可以简单地使用以下代码:

.parent-wrapper {
    display: flex;
    flex-wrap: wrap;
}

.parent {
    flex: 50%;
    padding: 48px 24px;
}

不需要高度,因为flex会照顾它。在这里,您不受内容长度的限制。因此,即使很长的答案也可以正确格式化。

我希望能对您有所帮助:)