对于长内容，内联块不能按预期工作？答案

【问题标题】：inline-block doesn't work as expected with long content?对于长内容，内联块不能按预期工作？
【发布时间】：2013-01-17 22:12:43
【问题描述】：

我有两个想要内联的 div（一个在左侧，一个在右侧）。右边的包含一行文本。我希望它始终是单行文本，并在必要时省略。我不能正确地进行内联，因为当我的文本太长时，右侧的 div 会跳到左侧的下方。示例：

<!doctype>
<html>

<head>
    <style type="text/css">
    #panelLeft {
      display: inline-block;
      width: 50px;
      height: 20px;
      background-color: #f00;
    }
    #panelRight {
      display: inline-block;
      background-color: #0f0;
      /* width: 200px; */ works ok if explicitly sized
    }
    #test {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    </style>
</head>

<body>
    <div id="panelLeft">
    </div>
    <div id="panelRight">
        <div id="test">
            This is some text that's longer than usual and that I'd like to have ellipsized, and forced to a single line, always.
        </div>
    </div>
</body>      
</html>

http://jsfiddle.net/JEQPL/1/

如果我为 panelRight 指定宽度（等于或小于剩余空间），那么我的 div 位于同一行，并且省略号显示正确。当我不知道 panelRight 的确切宽度时，如何让它工作？

谢谢

【问题讨论】：

标签： html css

【解决方案1】：

我会考虑浮动左列并调整右列边距来弥补左列所需的空间，而不是 inline-block。

以下是我常用的技巧：http://jsfiddle.net/q3rEX/

HTML：

<div class="left">Left Bar</div>
<div class="right">There is a bunch of text in here and I don't want it to jump down a line cause that stinks!</div>

还有 CSS：

.left { float: left; width: 25%; background: red; }
.right { margin-left: 25%; background: green; }

然后您可以将文本换行预防、省略号等应用到.right 以拨入。

这还有一些好处，即一些旧版浏览器不支持 inline-block。

【讨论】：

【解决方案2】：

将它们都放在 Parent Div 中，并带有position:relative;。

<div id="parentDiv">
    <div id="panelLeft">
    </div>
    <div id="panelRight">
         <div id="test">
         </div>
    </div>
</div>

然后给#panelRight一个position:absolute;。

#parentDiv
{
    position:relative;
}
#panelRight
{
    position:absolute;
    right:0px;
    left:60px; // #panelLeft has a width of 50px, so change it the way you like.
}

检查一下：http://jsfiddle.net/AliBassam/BpQqu/

【讨论】：

【解决方案3】：

您可以使用以下问题的答案中描述的一种技术将右 div 的宽度设置为 100% 减去左列的宽度：Is it possible to make a div 50px less than 100% in CSS3?

使用calc()：

#panelRight {
  display: inline-block;
  background-color: #0f0;
  max-width: calc(100% - 50px);
}

http://jsfiddle.net/JEQPL/9/

或者，绝对定位：

#panelRight {
  display: inline-block;
  background-color: #0f0;
  position: absolute;
  left: 50px;
  right: 0;
}

http://jsfiddle.net/JEQPL/10/

【讨论】：