Как равномерно распределить блоки по "резиновому" контейнеру?

Тема в разделе "Интерактивные возможности", создана пользователем list, 01.01.2012.

  1. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Коллеги, помогите придумать, как реализовать следующее. Есть область (контейнер) на странице, в которой размещаются N блоков фиксированной ширины и высоты. Если делать их float: left, то они, ясен пень, строятся "табличкой" под левый край в количестве "сколько влезет на строку". А как их равномерно распределить по "резиновому" контейнеру?
    Думаю решение возможно на js, то есть узнать ширину браузера, разделить на ширину блока и выставить отступы.
    Помогите это реализовать!
     
  2.  
  3. Offline

    fanatikus Недавно здесь

    Регистрация:
    01.12.2011
    Сообщения:
    155
    Симпатии:
    12
    Пол:
    Мужской
    А если, сделать резиновую таблицу, а в ячейки забабахать дивы с фиксированными размерами.
    По теории, при изменении размеров таблицы, будет только расстояние между дивами изменяться .
     
  4. draff
    Offline

    draff Russian Joomla! Team Команда форума

    Регистрация:
    17.01.2011
    Сообщения:
    6 040
    Симпатии:
    518
    Пол:
    Мужской
    а выставить margin-left and padding-left с процентным значением.
     
  5. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Код (html):
    1. <html>
    2. <head>
    3.     <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    4.     <script type="text/javascript">
    5.         jQuery(document).ready(function($)
    6.         {
    7.             function r()
    8.             {
    9.                 var w = $('#all').width();
    10.                 var kol = Math.floor(w/200);
    11.                 var m = Math.floor((w - kol * 200) / kol);            
    12.                
    13.                 $('div.allblock').each(function(index, domEle)
    14.                     {
    15.                         $(domEle).width( 200 + m);
    16.                     }
    17.                 );
    18.             }
    19.                         r();
    20.                         $(window).resize(function() { r(); } );
    21.                 })(jQuery);
    22.     </script>
    23.  
    24. </head>
    25. <body>
    26. <div style="width: 100%;" id="all">
    27.     <div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>
    28.     <div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>
    29.     <div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>
    30.     <div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>
    31.     <div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>
    32.     <div class="allblock" style="float: left; background: silver; width: 200px; height: 300px; position: relative; margin: 0;"><div style="border: 1px solid black">блок</div></div>
    33. </div>
    34. </body>
    35. </html>

    Нашёл на одном форуме Но сдесь лишнее распределяется в блоки Как бы переделать этот код чтобы распределение шло между блоками??
     
  6. Offline

    list Недавно здесь

    Регистрация:
    18.12.2011
    Сообщения:
    28
    Симпатии:
    0
    Пол:
    Мужской
    Скрипт доработал В html всё работает безупречно но когда его переношу в блочную вёрстку по joomla в файл index.php он перестаёт распределять свободное пространство между блоками Если кто знает в чём может быть проблема подскажите? Спасибо!
     

Поделиться этой страницей

Загрузка...