Javascript 用divs模拟动态表单元格宽度增长

当涉及到将页面宽度分成几列时，我总是使用一个表。使用固定的表格宽度，单元格宽度是动态确定的

但是现在我想用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，以避免呈现阻塞，这样页面就会加载错误的格式，直到加载所有脚本为止

有没有办法不用javascript，通过css实现这一点

这里有两个例子

IE8及以上

IE7

---

您可能被迫在表格单元格上设置一个

最大宽度

，该单元格通常具有较小的宽度。然后，不要为“最大”的表格单元格指定宽度，它会占用剩余的空间，并在需要时换行。@lindsay，我想你误解了这个问题。我想使用div而不是表单元格，但我希望这些div具有相同的功能。很抱歉。这里有一个简单的例子。这就是你的想法吗？诚然，它使用的是

display:table

和

display:table cell

。没错，但我不想这样做的原因正如w3schools.com中所述：注意：值“inline table”、“table”、“table caption”、“table cell”、“table column”、“table column group”、“table row”和“table row group”IE7及更早版本中不支持。IE8需要一个！DOCTYPE。IE9支持这些价值观。但是，尽管我曾经考虑过这个想法，但没有对它进行测试。谢谢你的小提琴。它工作得很好。我想我应该克服IE7；）和你一样使用。

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

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