左右切换位置

Question

我有多篇文章，每篇文章都有一张图片，我正在使用 Flexbox 来设置页面样式，我想做的是每隔一行在文章和图片之间切换，所以第一行应该是像 (article-image) 然后 (image-article) 然后再 (article-image) 等等 .. 这是第一篇带有样式的文章代码，如果我做错了什么或者你有更好的建议，请告诉我.

div {
  border: 1px dotted red;
  display: block;
}

.article {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width: 100%;
  overflow: hidden;
  padding: 10px;
}

.article-content {
  height: 100%;
  width: 48.6666666%;
  text-align: left;
}

.img-control {
  margin-left: 3.5%;
  width: 48%;
  overflow: hidden;
  align-self: stretch;
}

.img-control .image {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'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 class="img-control">
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div>
  </div>
</div>

Answer 1

您可以拥有一个包含两个静态 div 的动态 div，一个带有 article-image 和一个带有 image-article。像这样：

<div id='dynamic div'>
<div class="article">
    <div class="article-content">
        <div class="img-control">
        </div>
    </div>
</div>

<div class="article">
    <div class="img-control">
    </div>
    <div class="article-content">
    </div>
</div>

Answer 2

您使用 nth-child 和 Flexbox 的 order 来完成此操作，其中您使用 even 可以每秒（2、4、..）article，然后将 .img-control 放在文本之前，使用order: -1。

div {
  border: 1px dotted red;
  display: block;
}

.article {
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  width: 100%;
  overflow: hidden;
  padding: 10px;
}

.article-content {
  width: 48.6666666%;
  text-align: left;
}

.article:nth-child(even) .img-control {
  order: -1;
  margin-right: 3.5%;
  margin-left: 0;
}

.img-control {
  margin-left: 3.5%;
  width: 48%;
  overflow: hidden;
  align-self: stretch;
}

.img-control .image {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
}

<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'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 class="img-control">
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div>
  </div>
</div>
<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'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 class="img-control">
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div>
  </div>
</div>
<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'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 class="img-control">
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div>
  </div>
</div>
<div class="article">
  <div class="article-content">
    <h3>What is Lorem Ipsum?</h3>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry'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 class="img-control">
    <div class="image" style="background-image: url(//via.placeholder.com/490x338);"></div>
  </div>
</div>