フレックスボックスを使用した小さなテキストと大きなイメージ

Question

"foo"と "bar"イメージに関する短いテキストがあります。私は画像とこれらの対応するテキストを並べて整列させたい、そして現在は::after疑似要素でそれに達しました。

多分、フレックスボックスを使用して、それを達成するより良い方法でしょうか？

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を使用できます。しかし、構造を少し変えなければなりません。

は、以下のスニペットを見てください（Iフレームに適切に収まるように画像のサイズを少し減少しました）：

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

・ホープこのことができます！

Answer 2

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

あなたは、このリンクをチェックすることができます - https://www.smashingmagazine.com/2011/09/css3-flexible-box-layout-explained/は、それはあなたを助けるかもしれません。