如何在信息框中对齐2行

时间：2017-11-14 20:23:27

标签： html css twitter-bootstrap

所以我在信息框中显示了这两行文字....但是一行有一个图标而下一行没有。我不确定如何对齐单词，以便没有图标的第二行正确缩进。

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

它像这样出现

enter image description here

编辑：也使用bootstrap ...如果有帮助

2 个答案:

答案 0 :(得分：2)

无需将所有内容都包装在div中，我建议您只需将副本包装在一个范围内，然后使用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/

答案 1 :(得分：0)

如果您可以制作自定义样式表，则应尝试display: flex; 为您的文字创建容器span，然后将其设置为与flexbox位于同一行，这很容易。

＆＃13;
＆＃13; 
.alert {
  display: flex;
  align-items: center;
}
＆＃13; 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="alert alert-info">
  <i class="alert-icon-info alert-icon"><!--WARNING : remove the image, it's only there to demonstrate that it's working--><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Info_icon-72a7cf.svg/1024px-Info_icon-72a7cf.svg.png" width="20"/><!--END OF WARNING--></i>
  <span class="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed </span>
</div>
＆＃13;
＆＃13;
＆＃13;

请点击此处查看完整指南：A Complete Guide to Flexbox

相关问题
最新问题