Question

我有一系列包含图片和内容的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

你想要这样的东西吗？

CSS类应更正为。

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

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

您需要将offeringsImg selecor应用于具有类nth-of-type()的div，而不是应用于offeringsItem类的div，因为只有这些元素具有共同的父级和索引将在他们有单独的父母之前正确地进行，因此它不起作用！还有一个更正是你错过了HTML中的最终结束div。

.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;
}

.offeringsImg img {
  max-width: 100%;
  height: auto;
  display: block;
}

.offeringsItem:nth-of-type(odd) img {
  float: right;
}

.offeringsItem:nth-of-type(even) img {
  float: left;
}

<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>
  <div class="offeringsItem">
    <div class="offeringsImg">
      <img src="https://s3.amazonaws.com/tpd-files/images/Artboard-2.png">
    </div>
  </div>
</div>

Answer 2

如果您要使用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更新更容易阅读;）

Answer 3

请尝试在图片框上使用margin-left: auto和margin-right: auto，而不是使用浮动

Flexbox / Container中的备用浮动

3 个答案: