jsv jsv - 13 days ago 5
CSS Question

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>

Answer

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!

Comments