备用方框位置 - CSS/Bootstrap

Question

我在这里创建了一个 Bootstrap 4 脚本：

如何交替 left/right 框的对齐方式。 IE。我想在左右两侧切换每个第二个框..

Description - Image
Image - Description
Description - Image
Image - Description
Description - Image
Image - Description

nth-child(3n+1) 不知何故似乎不起作用。

Answer 1

您想使用 2n + 1（每个奇数）

.container {
  width: 200px;
}

.image, .desc{
  width: 50%;
  height: 50px;
  display: inline-block;
}

.image {
  background: red;
  float: left;
}

.desc {
  background: blue;
  float: right;
}

.container:nth-child(2n + 1) .image {
  float:right;
}

  <div class="container">
    <div class="image">
      Image
    </div>
    <div class="desc">
      Description
    </div>
  </div>
  <div class="container">
    <div class="image">
      Image
    </div>
    <div class="desc">
      Description
    </div>
  </div>
  <div class="container">
    <div class="image">
      Image
    </div>
    <div class="desc">
      Description
    </div>
  </div>

备用方框位置 - CSS/Bootstrap

Alternate box position - CSS/Bootstrap

css

alignment

box