两个带文本的内联块自动换行答案

【问题标题】：Two inline-blocks with text automatically break line两个带文本的内联块自动换行
【发布时间】：2016-01-20 20:15:26
【问题描述】：

我有两个具有 inline-block 样式的 div，它们都包含具有不同字体大小的文本。它们应该在同一行，然后第二个应该中断，但只有当第二个 div 短于 body 的宽度时，它们才会中断。

div {
  display: inline-block;
  font-family: Arial;
}
#a {
  font-size: 30px;
  margin-right: 50px;
}
#b {
  /* No new line at b!! */
  font-size: 40px;
}

<div id="a">Fruits:</div>
<div id="b">Banana (3), Apple (2), Kiwi (5), Orange (1), Pear (11)</div>

我在这里说明问题：

它看起来是什么样的：

Fruits:
Banana (3), Apple (2), Kiwi (5), Orange (1), Pear (11)

它应该是什么样子：

Fruits:  Banana (3), Apple (2), Kiwi (5),
         Orange (1), Pear (11)

再举一个例子，它不应该看起来像，但如果 div 是内联的，则可能：

Fruits:  Banana (3), Apple (2), Kiwi (5),
Orange (1), Pear (11)

有没有办法解决这个问题？

我尝试过使用 white-space: nowrap 和 word-wrap: break-word，但它们似乎都不起作用。

【问题讨论】：

你看到我更新的答案了吗？你能评论点什么吗？
@SergeyDenisov 是的，这正是我所需要的并解决了问题。
那你能投票并接受吗？
@SergeyDenisov 是的，我会的，感谢您的精彩回答。

标签： html css

【解决方案1】：

你可以使用display: table-cell，但是你应该使用padding而不是margin，因为：

Margin 适用于所有元素，除了具有table-caption、table 和inline-table 之外的表display 类型的元素。

JSFiddle

div {
  display: table-cell;
  font-family: Arial;
}
#a {
  font-size: 30px;
  padding-right: 50px;
}
#b {
  /* No new line at b!! */
  font-size: 40px;
}

<div id="a">Fruits:</div>
<div id="b">Banana (3), Apple (2), Kiwi (5), Orange (1), Pear (11)</div>

【讨论】：

等待.. 找到了一些东西.. #a 上的边距右侧不起作用：/
@Murplyx 边距不适用于表格单元格。你可以试试padding 或border-spacing。见Set cellpadding and cellspacing in CSS?
@Murplyx 是的，正如@Oriol 所说，那么您应该使用padding。改进了我的答案。

【解决方案2】：

不用inline-blocks，你可以

将第一项浮动到左侧。
使第二个建立块格式化上下文 (BFC) 以防止它与前者重叠。建立 BFC 的常用方法是overflow: hidden。

div {
  font-family: Arial;
}
#a {
  float: left; /* Push to the left */
  font-size: 30px;
  margin-right: 50px;
}
#b {
  overflow: hidden; /* Establish BFC */
  font-size: 40px;
}

<div id="a">Fruits:</div>
<div id="b">Banana (3), Apple (2), Kiwi (5), Orange (1), Pear (11)</div>

【讨论】：