:nth-child(even/odd) 不使用 acf

Question

我正在使用 bootstrap 和高级自定义字段，并且有一个可以输出图像和文本的转发器字段。我正在尝试让图像和文本交换边（向左或向右浮动）每隔一行循环

下面的 CSS 是最合乎逻辑的，但我已经尝试了许多不同的嵌套和变体。

.tour-row .col-md-5:nth-child(odd) {
  float: left !important;
}

.tour-row .col-md-5:nth-child(even) {
  float: right !important;
}

<div class="wrapper clear">
  <div class="row tour-row">
    <h2 class="tour-title">
      Tour 2
    </h2>
    <div class="tour-button btn btn-primary blk-button xola-checkout xola-custom" data-button-id="asdfddddddd">BOOK NOW</div>

    <div class="col-md-5">
      <div class="slideshow-tours">
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/best-funny-dog-breed-mixes-high-resolution-wallpaper-funnypicture-org-pics-of-and-breeding-style.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/best-funny-dog-breed-mixes-high-resolution-wallpaper-funnypicture-org-pics-of-and-breeding-style.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
      </div>
    </div>
    <div class="col-md-7">
      <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
  <!--end row -->
</div>
<!-- end wrapper -->
<div class="wrapper clear">
  <div class="row tour-row">
    <h2 class="tour-title">
      another tour
    </h2>
    <div class="tour-button btn btn-primary blk-button xola-checkout xola-custom" data-button-id="klasdjfd">BOOK NOW</div>

    <div class="col-md-5">
      <div class="slideshow-tours">
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/1springmural_handlebar.jpg">
        </div>
        <div class="tour-slideshow">
          <img src="http://handlebardev.mscdev/wp-content/uploads/2018/06/dogs-high-resolution-wallpaper-4.jpg">
        </div>
      </div>
    </div>
    <div class="col-md-7">
      <p>is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>

  </div>
  <!--end row -->
</div>
<!-- end wrapper -->
</div>
<!-- end wrapper -->

Answer 1

根据规格，"The :nth-child() CSS pseudo-class matches elements based on their position in a group of siblings." (read a good refresher about the nth-child rule here)。在这里，您的 CSS 规则转换为 "for every col-md-5 element that is an ODD child of a .tour-row div, make it float left" 或另一种表达方式，"in a tour-row div, make every odd col-md-element float left." 但这不是您想要做的（根据我对您的问题的理解）。您希望 "for every odd ROW, make the col-md-5 float left." 根据您构建 HTML 的方式来做到这一点，您需要这样的规则：

.wrapper:nth-child(odd) .col-md-5 {
    float: left ;
}

为了使偶数行向右浮动，您只需这样做：

.wrapper:nth-child(even) .col-md-5 {
    float: right ;
}

为了进一步简化事情，您可以这样做 CSS:

.wrapper .col-md-5 {
    float: right ;
}

.wrapper:nth-child(odd) .col-md-5 {
    float: left;
}

希望对您有所帮助！

:nth-child(even/odd) 不使用 acf

:nth-child(even/odd) not working with acf

html

css

repeater

css-selectors

advanced-custom-fields