省略号无固定宽度

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/