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

Posted 2023-03-06

【中文标题】两个 div 并排（再次）[重复]

【英文标题】：two divs side by side (again) [duplicate]

【发布时间】：2018-02-19 12:00:38

【问题描述】：

我已经阅读了无数关于这个主题的帖子，但是我还没有找到一个有效的解决方案。我只想让两个 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>

【参考方案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 或其他）。

【讨论】：

这对我不起作用。仍然放在另一个下面的 div 上。

您在任何容器上是否有任何边距或填充？因为如果你这样做了，那么你需要调整宽度，因为 developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/… 盒子模型

【参考方案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>

【讨论】：

谢谢，但是这个解决方案有我想避免的文本换行。

我没有找到任何自动换行，你能具体说一下吗？

文本从图标右侧开始，但第二行文本位于图标下方。我希望将这两个项目有效地放在相邻的两列中。

检查更新的。那么你应该使用display: table-cell。

@RaJeshRiJo：现在你只是在复制我的答案，RaJesh：-p

【参考方案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。

【讨论】：

是的，这应该可以。 +1

这是最接近任何建议解决方案的方法。由于 FA 图标的大小，文本当前被降级，是否可以让文本更靠近顶部？

@Dercni ：您可能想尝试float : left 为.text-info 和display: table-cell; 为.text-muted。见this demo!

@Dercni ：我根据您的其他要求更新了我的答案！