Question

我有两个内联块样式的div，它们都包含不同字体大小的文本。它们应该在同一条线上，然后第二条线应该断开，但它们只有在第二个div比身体的宽度短的时候。

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和自动换行：break-word，但它们似乎都不起作用。

Answer 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>

Answer 2

您可以

而不是使用inline-block

将第一个项目浮动到左侧。
使第二个建立块格式化上下文（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>

两个带文本的内联块自动断行

2 个答案: