Flexbox/容器中的备用浮标 [英] Alternate Floats in Flexbox/Container

问题描述

我有一系列包含图像和内容的flexbox项.我想交替显示图像在flexbox项的哪一侧(即，框的左侧在一个框内，右侧在下一个框内).我似乎无法正常工作.任何建议表示赞赏！

I have a series of flexbox items that contain an image and content. I'd like to alternate which side of the flexbox item the image appears (i.e., the left side of the box in one, the right side in the next). I can't seem to get it to work. Any suggestions are appreciated!

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>

推荐答案

如果您要使用 flex ，我相信在 .offeringsItem 上使用它就足够了.和 flex-flow:row-reverse 即可完成工作.

If you are about using flex, i believe using it on .offeringsItem is plenty enough. and flex-flow:row-reverse will do the job.

.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更新更易于阅读；)

I 'have removed some styles that did not seem necessary, it also makes the CSS update easier to read ;)

这篇关于Flexbox/容器中的备用浮标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！