Question

我有两个我想要内联的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的确切宽度时，我怎么能让它工作？

由于

Answer 1

我会考虑浮动左列并调整右列边距以弥补左列所需的空间，而不是内联块。

这是我通常使用的技巧的小提琴：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; }

然后，您可以将{text}的预防，省略号等应用到.right，以便将其拨入。

这也有一些好处，因为某些旧版浏览器不支持内联块。

Answer 2

将它们放在带有position:relative;的 Parent Div 中。

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

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

内联块在长内容中无法正常工作？

3 个答案: