浮动图像旁边的文本与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

回答

相关问题