两个 div 并排（再次）[重复]

Question

我已经阅读了无数关于这个主题的帖子，但是我还没有找到一个有效的解决方案。我只想让两个 div 并排排列，LHS div 是 FA 字符的宽度，RHS div 是余数。

<div class="helper">
  <div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
  <div class="text-muted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
  </div>
</div>

Answer 1

不确定您要做什么，但您可以使用 JS fiddle here 中的 Flexbox 之类的东西。

您也可以这样做：

HTML

<div class="helper">
  <div class="text-info">FA</div>
   <div class="text-muted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
  </div>
</div>

CSS

.text-info, .text-muted {
  float:left;
}
.helper {
  clear:both;
}

如果您希望它们具有不同的宽度，您可以简单地设置它们的宽度（使用%、px 或其他）。

Answer 2

将display:table-cell 设置为您的内容，图标将提供所需的输出。检查下面的sn-p。

.inline {
  display: table-cell !important;
  width: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
  <div class="text-info"><i class="fa fa-info-circle fa-2x inline"></i></span>
    <div class="text-muted inline">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel.
      Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
    </div>
  </div>

Answer 3

我相信这就是你想要的：

.text-muted {
  display: table-cell;
}

.text-info {
  padding-right: 10px;
  display: block;
  float: left;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="helper">
  <div class="text-info"><i class="fa fa-info-circle fa-2x"></i></div>
  <div class="text-muted">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non tincidunt ante. Duis a est ipsum. Morbi vulputate neque vitae nibh sodales gravida. Etiam viverra vulputate est nec faucibus. Nullam volutpat sagittis augue, et mattis nisi facilisis vel. Nunc eu dignissim lectus, vitae venenatis nisi. Proin euismod, enim nec pulvinar maximus, mi justo luctus odio, in tristique dolor augue nec lacus.
  </div>
</div>

另见this Fiddle。