Geek asks and answers

Div multiple float left stretch

I have something like the following:

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

The contents of div_1, div_2 ... div_n are columns with dynamic width.

I want something like this:

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

How can I put the columns "float: left" at maximum width?

Note. In general, there is no fixed width. And I cannot create a table to place the contents of a div.

: div.
, . .

+3
2

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/

, 'px' <td>, div , , , . .

+1

: http://jsfiddle.net/yHrZx/
HTML, CSS. JavaScript ...

0

More articles:


All Articles