2

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

谢谢

4

3 回答 3

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。

于 2013-02-02T20:11:00.330 回答
1

将它们都放在带有.position:relative;

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

然后给#panelRighta 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/

于 2013-02-02T20:15:25.340 回答
0

您可以使用以下问题的答案中描述的技术之一将右 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/

于 2013-02-02T20:14:59.057 回答