小文本和大图像并排使用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>

希望这有助于！

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/可能是它会帮助你。