dongzongpeng6474
dongzongpeng6474
2019-05-08 19:53
浏览 84
已采纳

两列重复器字段高级自定义字段

I am new to ACF and want to use a repeater field to create a two column row. It is functioning how I want (two even, halved columns). I want each column to begin at the same height as the other, therefor I set the height. But I want to ensure I am using best practices... is how I wrote this the way you would recommend going about it? I feel like there is probably a better way.

Thank you in advance.

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条回答 默认 最新

  • dongyin8991
    dongyin8991 2019-05-08 22:37
    已采纳

    if you're able to add an additional class to the wrapping div (class="dib …"), lets call it '.parent-wrapper', you could simply use following code:

    .parent-wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    
    .parent {
        flex: 50%;
        padding: 48px 24px;
    }
    

    No need for height, as flex takes care of it. Here you're independent from the content length. So even very long answers would be formatted correctly.

    I hope that helps :)

    点赞 评论

相关推荐