使用div模拟动态表格单元格宽度增长

Question

在将页面宽度分成几列时，我总是使用表格。固定表格宽度，动态确定单元格宽度。

但现在我想使用div而不是表格单元格来做这件事。使用javascript / jquery很容易：

var desiredWidth = 500;
var totalWidth = $('#div1').outerWidth() + $('#div2').outerWidth() + $('#div3').outerWidth();
var scale = desiredWidth / totalWidth;
$('#div1').outerWidth(scale * $('#div1').outerWidth());
$('#div2').outerWidth(scale * $('#div2').outerWidth());
$('#div3').outerWidth(scale * $('#div3').outerWidth());

但问题是我总是在关闭body标签之前在header和javascripts中加载css以避免渲染阻塞，这样页面加载格式错误直到加载所有脚本。

有没有办法用css做这个，不使用javascript？

Answer 1

这里有两个例子。

IE8及更高版本fiddle。

.container {
   display: table;
}
.col {
   display: table-cell;
}

IE7 fiddle。

.container {
   float: left;
}
.col {
   display: inline;
}