html5填充剩余宽度,填充元素和剪切文本之间的剩余宽度

jQuery的解决方案

我开始用一个jQuery协助解决。

的CSS是这样的：

div {

width: 100%;

overflow: auto;

}

a {

border: 1px solid gray;

margin: 3px;

height: 50px;

float: left;

}

.c {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

}

.d {

float: right;

}

和jQuery函数：

$("div").each(function(){

var innerWidth = 0;

$(this).find("a").not(".flex").each(function(){

innerWidth += $(this).outerWidth(true);

});

var flexWidth = $(this).width() - innerWidth - 9; /* padding + border + 1 */

$(this).find(".flex").width(flexWidth);

});

有一个硬编码的常量，表示左/右填充和边界在柔性与DIV(a.c在你的例子中)，并由于某种原因，有一个1px调整，以保持浮线在一条线上。 (不太确定起源...)。

与浮子固定宽度

我作了轻微调整到如下的HTML的混合物(在a.c前方移动a.d)：

First column

Second column

Last column

Very long text...

和使用以下CSS：

.ex2 a {

border: 1px solid gray;

margin: 3px;

height: 50px;

}

.ex2 .a {

width: 90px;

float: left;

}

.ex2 .b {

width: 90px;

float: left;

}

.ex2 .c {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

display: block;

margin: 3px 100px 3px 199px;

}

.ex2 .d {

width: 90px;

float: right;

}

本质上，浮动左边的两个元素和右边的一个，使它环绕更宽的一个。较宽元素的宽度具有左/右边距以适应浮动元素。

总体而言，两种方法都有优点，但对于我们所得到的结果似乎有很多工作要做......