所以我在信息框中显示了这两行文本....但是一行有一个图标而下一行没有。我不确定如何对齐单词，以便正确缩进没有图标的第二行。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="alert alert-info">
<i class="alert-icon-info alert-icon"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
</div>结果是这样的
编辑:也使用 Bootstrap ...如果有帮助的话
最佳答案
无需将所有内容都包裹在 div 中，我建议只需将您的副本包裹在一个 span 中并使用 flexbox 来对齐您的元素。
HTML 编辑:
<div class="alert alert-info my-alert">
<i class="alert-icon-info alert-icon"></i>
<span class="alert-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed</span>
</div>
CSS 编辑:
.my-alert {
display:flex;
flex-direction:row;
}
JSFiddle 在这里:https://jsfiddle.net/visioncreative/ufu6Lcud/3/
CSS-Tricks 上关于 Flexbox 的优秀文档，https://css-tricks.com/snippets/css/a-guide-to-flexbox/
关于html - 如何在信息框中对齐 2 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47294556/