html - div 多个 float 向左拉伸(stretch)

Question

我有这样的事情:

<style>
 .putLeft
 {
   float: left;
 }
</style>

<table>
  <tr>
    <td>
      Some dynamic text
    </tr>
  </td>
  <tr>
    <td>
      <div id="div_1" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_2" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_3" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_4" class="putLeft">1<br/>2<br/>3<br/>4</div>
      <div id="div_n" class="putLeft">1<br/>2<br/>3<br/>4</div>
    </td>
  </tr>
</table>

div_1,div_2...div_n的内容是动态宽度的列。

我想要的是这样的:

|some text with dynamic width and can be very long text|
-------------------------------------------------------
|    div1   |      div2    |     div3    |     div4   |
|    1      |        2     |       2     |      4     |
|    1      |        2     |       2     |      4     |



But my result is something like this:

|some text with dynamic with and can be very long text|
-------------------------------------------------------
| div1 | div2 | div3 | div4 |
|  1   |   2  |   2  |   4  |
|  1   |   2  |   2  |   4  |

如何将“float: left”列拉伸(stretch)到最大宽度？

注意:整个例子没有固定的宽度。而且我无法制作表格来放置 div 的内容。

编辑:在 div 上插入了一些内容。我确实放了一些
来简化示例。但它会有其他内容。

Answer 1

一个 jQuery 例子是:

HTML:

<table>
  <tr>
    <td>
      Some dynamic text
    </tr>
  </td>
  <tr>
    <td id="row">
      <div id="div_1" class="putLeft"></div>
      <div id="div_2" class="putLeft"></div>
      <div id="div_3" class="putLeft"></div>
      <div id="div_4" class="putLeft"></div>
      <div id="div_n" class="putLeft"></div>
    </td>
  </tr>
</table>

CSS:

.putLeft
 {
   float: left;
    height: 20px;
    background: #ffcc33;
 }

table { width: 100% }

JS 与 jQuery

$(function() {
   var count = $('#row div').length;
   $('#row div').each( function(index, item) {
       $(item).css('width', Math.floor(100 / count) + '%');
   });
});

这是一个 jsFiddle:http://jsfiddle.net/qdnvq/

通过从外部 <td> 中检索以“px”为单位的宽度，这可以变得更加准确然后计算 div 的像素宽度，并可能使最后一个一样大以绕过四舍五入的缺失空间。您也可以使用绝对定位而不是 float 定位。