Question

我有多篇文章，每篇文章都有一个图片，我正在使用Flexbox来设置我的页面样式，我要做的是每隔一行在文章和图片之间切换，所以第一行应该是喜欢（文章 - 图像）然后（图片 - 文章）然后再（图片 - 图像）等。这里是第一篇带样式的文章代码，让我知道我做错了什么或者你有更好的建议。

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 {ie}}每秒可以定位（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>

在左右之间切换位置

2 个答案: