CODEWITHSUNDEEP
htmlcssflexbox
user90726
user90726

Reputation: 975

Small texts and large images side by side, using flexbox

I have some short texts about "foo" and "bar" images. I want to align the images and these corresponding texts side by side, and currently I reached it with ::after pseudo-element.

But maybe, the are better ways to achieve it, maybe using flexbox?

The JS fiidle

<style>
  .image { width: 510px; float: right; }

  p::after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }
</style>

<div class="image">
  <img src="Foo.jpg">
  <p class="caption">Caption</p>
</div>

<p>Text about Foo. Text text text text text text text text text 
text text text text text text text text text text text text text 
text text</p>

<div class="image">
  <img src="Bar.jpg">
  <p class="caption">Caption</p>
</div>

<p>Text about Bar. Text text text text text text text text text 
text text text text text text text text text text text text text 
text text</p>

Upvotes: 0

Views: 634

Answers (2)

Saurav Rastogi
Saurav Rastogi

Reputation: 9731

Yes! You can use CSS Flexbox. But you've have to change your structure a little bit.

Have a look at the snippet below (I've reduced the size of images a little bit to fit them properly into the frame):

.image {
  display: flex;
  align-items: center;
}

.image img {
  max-height: 200px;
  margin-right: 15px;
}
    <div class="image">
      <img src="http://i.imgur.com/yyJ04Sa.png">
      <div>
      <p class="caption">Caption</p>
          <p>Text about Foo. Text text text text text text text text text 
    text text text text text text text text text text text text text 
    text text</p>
      </div>
    </div>

    <div class="image">
      <img src="http://i.imgur.com/iWUPy0n.png">
      <div>
      <p class="caption">Caption</p>
          <p>Text about Bar. Text text text text text text text text text 
    text text text text text text text text text text text text text 
    text text</p>
      </div>
    </div>

Hope this helps!

Upvotes: 2

Razia sultana
Razia sultana

Reputation: 2211

<div style="display: box">
  <div style="width: 250px"> Content here </div>
  <div style="width: 250px"> Content here </div>
</div>

You can check this link:-https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/ may be it will help you.

Upvotes: 0

Related Questions