使用 flexbox 在文本旁边浮动图像

Question

我正在尝试在文本块的右侧放置一个简单的文章样式的浮动图像 -- 但如何使段落全长？不想使 HTML:

复杂化

当前输出：

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>

Answer 1

您必须在文本周围添加一个包装器。

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>

Answer 2

您可以这样做（您需要添加额外的 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

使用 flexbox 在文本旁边浮动图像

Floating images next to text with flexbox

css

flexbox