小文本和大圖像並排使用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/可能是它會幫助你。