javascript - 使用 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 和 javascript 中加载 css 以避免渲染阻塞，这样页面加载格式错误，直到加载所有脚本。

有没有什么方法可以在不使用 javascript 的情况下使用 css 来做到这一点？

Answer 1

这里举两个例子。

IE8 及更高版本 fiddle .

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

IE7 fiddle .

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