用flex展开图像周围的文本

时间:2018-02-01 09:30:33

标签: html css css3 flexbox

我有以下HTML和CSS:

HTML

<div class="container">
    <img src="img.png">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Aenean est lectus, venenatis sit amet nisl sed, molestie 
    interdum elit. Proin maximus fermentum rhoncus. 
    Vestibulum blandit ligula ligula. Mauris volutpat cursus 
    enim eu iaculis. Duis condimentum ante sed dolor lacinia 
    imperdiet. Phasellus felis orci, dictum sed elit sed, 
    lobortis congue sem. Etiam at tortor diam. 
    </p>
</div>

CSS

body { 
    font-family: Arial; 
}
.container {
    max-width: 500px;
    display: flex;
}
img {
    align-self: baseline;
}
p { 
    margin: 0 0 0 10px; 
}

这就是我得到的(当前结果):

Current result

我想在不使用float(期望的结果)的情况下实现以下目的:

Desired result

我可以使用哪种flex属性?

0 个答案:

没有答案