內嵌塊無法按預期方式使用長內容？

我有兩個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

內嵌塊無法按預期方式使用長內容？

回答

相關問題