Question

我正在尝试使用材料设计框架的一些东西，但有些东西是行不通的。这是我得到的：

但我希望文本从顶部开始并保持在那里，因此文本不会像图片中那样跳转到另一行。我希望你们能帮助我。

<p><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Answer 1

我会使用一个表格，如下：

<table><tr><th><img src="yourimgsrc.jpeg"></th><th><p>Your text here</p></th></tr></table>

这可以防止出现问题，因为两行（<th>）的结尾高度相同

Answer 2

我相信这就是你要找的东西。您必须在一个<div>中同时包含IMG和文本，然后将它们包围在一个单独的<div>

中

#header{
    display:flex;
    flex-direction:row;
}

#column1{
    display:flex;
    flex-direction:column;

}


#column2{
    display:flex;
    flex-direction:column;
    padding-left: 20px;
}

<div id="header">
    <div id="column1"><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140"></div>
    <div id="column2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
</div>

如何使元素保持在同一行

2 个答案: