内嵌块无法按预期方式使用长内容？

我有两个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是在同一直线上，并且ellipsizing正确显示。如果我不知道panelRight的确切宽度，我怎么才能得到这个工作？

感谢

来源

2013-02-02 user291701

相反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即可拨打。

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

来源

2013-02-02 20:11:00 Fluidbyte

您可以设置右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-02 20:14:59 gilly3

把两者一家长里股利与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/

来源

2013-02-02 20:15:25

内嵌块无法按预期方式使用长内容？

回答

相关问题