浮動圖像旁邊的文本與flexbox

我正在嘗試一個簡單的文章式浮動圖像文本塊的權利 - 但我如何使段落全長？寧願不HTML複雜：浮動圖像旁邊的文本與flexbox

電流輸出：

Lorem ipsum dolor sit   Sed do eiusmod    |-------| 
amet, consectetur    tempor incididunt   |  | 
adipiscing elit.    ut labore.     |  | 
                 |-------|

所需的輸出：

Lorem ipsum dolor sit amet, consectetur adipiscing elit. |-------| 
                 |  | 
Sed do eiusmod tempor incididunt ut labore.    |  | 
                 |-------|

article { 
 
    display:flex; 
 
} 
 
article p { 
 
} 
 
img { 
 
}

<article> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    <img src="http://placehold.it/150x350"> 
 
</article>

來源

2015-10-17 Mark Boulder

所期望的結果的圖像將是有益的。 –

請參閱更新的問題。 –

你必須在文本中添加一個包裝。

article { 
 
    display:flex; 
 
    flex-direction:row; 
 
} 
 
div.text { 
 
    display:flex; 
 
    flex-direction:column; 
 
}

<article> 
 
    <div class="text"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    <img src="http://placehold.it/150x350"> 
 
</article>

來源

2015-10-17 09:30:59

你可以這樣做（你需要添加額外的HTML標記做正確的方式）：

CSS

article { 
    display: -webkit-flex; 
    display: flex; 
    -webkit-flex-flow: row nowrap; 
    flex-flow: row nowrap; 
} 

.flex-item { 
    -webkit-flex: 1 auto; 
    flex: 1 auto; 
}

HTML

<article> 
    <div class="flex-item"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div> 
    <div class="flex-item"> 
     <img src="http://placehold.it/150x350"> 
    </div> 
</article>

DEMO HERE

來源

2015-10-17 09:53:05

浮動圖像旁邊的文本與flexbox

回答

相關問題