html - Flexbox/容器中的交替 float

Question

我有一系列包含图像和内容的 flexbox 元素。我想交替显示图像出现在 flexbox 元素的哪一侧(即，盒子的左侧在一个，右侧在下一个)。我似乎无法让它工作。任何建议表示赞赏!

CSS

.offerings {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

.offeringsItem {
    width: 90%;
    height: auto;
    margin: 10px;
    padding: 15px;
    border: 2px solid #dedede;

}

.offeringsContent {
    margin: 10px;
    position: relative;
}

.offeringsImg {
    margin: 10px;
    float: left;
}

.offeringsImg img {
    max-width: 100%;
    height: auto;
    display: block;
}

.offeringsImg:nth-of-type(odd) img {
    float: right;
}

.offeringsImg:nth-of-type(even) img {
    float: left;
}

HTML

<div class="offerings">
    <div class="offeringsItem">
        <div class="offeringsImg">
            <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
        </div>
        <div class="offeringsContent">
            Hi.
        </div>
    </div>
    <div class="offeringsItem">
    <div class="offeringsImg">
        <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
</div>

Answer 1

如果您要使用 flex，我相信在 .offeringsItem 上使用它就足够了。而 flex-flow:row-reverse 将完成这项工作。

.offeringsItem {
  display: flex;
  flex-wrap: wrap;
  margin: 10px;
  padding: 15px;
  border: 2px solid #dedede;
}

.offeringsItem:nth-of-type(odd) {
  flex-flow: row-reverse;
}

.offeringsContent,
.offeringsImg {
  margin: 10px;
}

.offeringsContent {
  flex: 1;
}

.offeringsImg img {
  max-width: 100%;
}

<div class="offerings">
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
    <div class="offeringsContent">
      Hi.
    </div>
  </div>
</div>

我已经删除了一些看起来没有必要的样式，这也使 CSS 更新更易于阅读；)