左浮动多个div元素并使其宽度自适应

Question

左浮动多个div元素并使其宽度自适应

3

我有类似于以下的内容：

<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>

、

...

的内容是具有动态宽度的列。

我想要的是像这样的东西：

|一些具有动态宽度并且可以非常长的文本|
-------------------------------------------------------
|    div1   |      div2    |     div3    |     div4   |
|    1      |        2     |       2     |      4     |
|    1      |        2     |       2     |      4     |
但我的结果是这样的：

|一些具有动态宽度并且可以非常长的文本|
-------------------------------------------------------
| div1 | div2 | div3 | div4 |
|  1   |   2  |   2  |   4  |
|  1   |   2  |   2  |   4  |

如何使“float：left”列拉伸到最大宽度？

注意：整个示例中没有固定的宽度。我不能制作一个表来放置div的内容。

编辑：插入了一些div内容。我放了一些
以简化示例。但它会有其他内容。

- bruno

设计时 div 的数量也是未知的，而且您不想使用 JavaScript？ - DanielB

你其实不需要使用JavaScript :) 我建议尝试寻找一个纯CSS的解决方案，这是显而易见的。另外，上面的标记是无效的。我为你创建了一个带有正确标记的fiddle。 - pixelbobby

2个回答

0

我为你创建了一个fiddle并纠正了你的标记：http://jsfiddle.net/yHrZx/
你能提供更多的HTML代码吗？这样我们才能帮你处理CSS。 尽可能避免使用JavaScript解决方案...

- pixelbobby

一个只使用CSS的解决方案，如何处理浮动div和未知宽度？ - DanielB

我已经填充了一些内容到列中。希望这样你能更好地理解。 - bruno

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DanielB · Accepted Answer

一个 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% }

使用jQuery的JS

$(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的像素宽度，最后一个可能会更大，以绕过四舍五入导致的缺失空间，可以使其更加精确。此外，您可以使用绝对定位而不是浮动。