html - 小文本和大图像并排，使用 flexbox

Question

我有一些关于“foo”和“bar”图像的简短文本。我想并排对齐图像和这些相应的文本，目前我使用 ::after 伪元素实现了它。

但也许有更好的方法来实现它，也许是使用 flexbox？

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 1

是的!您可以使用 CSS Flexbox。但是你必须稍微改变一下你的结构。

看看下面的代码片段(我稍微缩小了图像的尺寸以使其适合框架):

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

希望这对您有所帮助!