div несколько поплавков влево - PullRequest
Новая
       8

div несколько поплавков влево

3 голосов
/ 09 мая 2011

У меня есть что-то вроде этого: 

<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», чтобы растянуть их до максимальной ширины?

Примечание: во всем примере фиксированная ширина отсутствует.И я не могу составить таблицу для размещения содержимого div.

Редактировать: Добавлен некоторый контент в div.Я положил некоторыесделать пример простым.Но у него будет другое содержимое.

Ответы [ 2 ]

1 голос
/ 09 мая 2011

Пример 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'ов и, возможно, сделав последний размер большим, чтобы обойти пропущенное пространство от округления. Также вы можете использовать абсолютное позиционирование вместо плавающего.

0 голосов
/ 09 мая 2011

Я создал для вас скрипку и исправил наценку: http://jsfiddle.net/yHrZx/
Можете ли вы предоставить больше HTML-кода, чтобы мы могли помочь вам с CSS. Избегайте JavaScript Solution для этого любой ценой ...

...