CODEWITHSUNDEEP
htmlcss
DD1229
DD1229

Reputation: 408

Alternate Floats in Flexbox/Container

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>

Upvotes: 4

Views: 2252

Answers (3)

G-Cyrillus
G-Cyrillus

Reputation: 106058

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>

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

Upvotes: 6

Naren Murali
Naren Murali

Reputation: 58492

Do you want something like this?

The CSS class should be corrected to.

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

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

Instead of applying on the div with the class offeringsImg, you need to apply the nth-of-type() selecor to the div with the class offeringsItem because only these elements have a common parent and the index will be taken properly, before they had separate parents hence it did not work!, One more correction is that you had missed the final closing div in the HTML.

.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>

Upvotes: 1

Errol59
Errol59

Reputation: 1507

Instead of using float, try using margin-left: auto and margin-right: auto on the boxes with your images

Upvotes: 0

Related Questions