: nth-child (четный / нечетный) не работает с acf

Question

Я использую начальные и расширенные настраиваемые поля и имею поле повторителя, которое выплевывает изображение и текст.Я пытаюсь заставить изображение и текст поменять местами (плавать влево или вправо) все остальные строки, которые зациклены

Следующий 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

Согласно спецификации, «CSS-псевдокласс: nth-child () сопоставляет элементы на основе их положения в группе братьев и сестер».( прочитайте хорошее повышение квалификации о правиле nth-child здесь ).Здесь ваше правило CSS переводится как «для каждого элемента col-md-5, который является дочерним элементом ODD элемента div .tour-row, сделайте его плавающим влево» или, иначе говоря, «в элементе tour-row, сделайте каждыйнечетный элемент col-md-элемента оставлен ".Но это не то, что вы хотите сделать (из того, что я понимаю по вашему вопросу).Вы хотите "для каждого нечетного ряда, сделайте, чтобы col-md-5 оставался на плаву"Чтобы сделать это в зависимости от того, как вы структурировали свой 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;
}

Надеюсь, это поможет!