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

在将页面宽度分为几列时，我一直使用一个表格。使用固定的表格宽度，可以动态确定单元格的宽度。



但是现在我想使用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标签之前立即在标头和javascript中加载css，以避免呈现阻塞，并且这种方式页面加载格式错误，直到加载所有脚本。

有没有办法使用CSS，而不使用JavaScript？

最佳答案

这里有两个例子。

IE8和更高的fiddle。

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

IE7 fiddle。

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

关于javascript - 使用div模拟动态表格单元格的宽度增长，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24049142/