省略號無固定寬度

Question

我試圖做這樣的事情：

我有三個分度，沒有固定的寬度。左側（紅色）和右側（藍色）區域的寬度應與其內容（圖像）完全相同。左右區域可以有不同的寬度。

中心div將會有一些文字可以比div大，並且應該有一個省略號。

難度是，我不知道任何寬度，我想避免JavaScript。

Answer 1

HTML：

<div style="width:600px;"> <!-- 600px or the total desired width of the table --> 
    <div class="column" style="border-color:red;"> 
     <img src="http://i.imgur.com/w57Lk.png" /> 
    </div> 
    <div class="column" style="width:100px;"> 
     lorem ipsum dolor sit amet, lorem ipsum dolor sit amet, 
     lorem ipsum dolor sit amet, lorem ipsum dolor sit amet 
    </div> 
    <div class="column" style="border-color:blue;"> 
     <img src="http://i.imgur.com/aPlq6.png" /> 
    </div> 
</div> 

CSS：

​.column { 
    text-overflow: ellipsis; 
    height:400px; /* or whatever */ 
    float:left; 
    border:1px solid black; 
    overflow:hidden; 
    white-space: nowrap; 
}​ 

它使用CSS3，所以它可能具有有限的瀏覽器的支持。

---

編輯：

如果你不知道中間列所需的寬度，我不知道有什麼辦法做到這一點沒有至少一些JavaScript。幸運的是，JS應該非常簡單。使用jQuery，沒有在上面的HTML的style="width:100px;"部分：上的jsfiddle

(function($) { 
    var containerWidth = $('.column').parent().width()       
     - $('.column:first').width() 
     - $('.column:last').width() 
     - 6; //6 because the borders add 1px per side, per column 
    $('.column:nth-child(2)').width(containerWidth); 
})(jQuery);​ 

工作演示：http://jsfiddle.net/qPbfw/