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):
和使用以下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;
}
本质上,浮动左边的两个元素和右边的一个,使它环绕更宽的一个。较宽元素的宽度具有左/右边距以适应浮动元素。
总体而言,两种方法都有优点,但对于我们所得到的结果似乎有很多工作要做......