Войти
  1. ВКонтакте
  2. Facebook
  1. » » » равномерное расположение дивов по горизонтали
Новые публикации Скрыть панель справаПоказать панель справа

равномерное расположение дивов по горизонтали

2012-10-03T14:41:52+04:00 2015-03-19T15:24:05+03:00
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 1 отправлено 14:41, 03.10.2012
Добрый день!

надо равномерно расположить дивы одинакового размера на странице т.ч. при уменьшении ее ширины дивы выходящие за правый край переходили на следующий ряд.

предположим вначале имеем (Д - див):
Д Д Д Д Д Д Д

после уменьшения ширины страницы должно быть:

Д Д Д Д
Д Д Д

частичное решение возможно с заданием для дивов стиля display:inline-block. Но тогда справа остается полоса порядка ширины дива. Можно для контейнера указать стиль text-align:justify. В этом случае все ряды, кроме последнего отображаются нормально. В последнем ряду дивы выравнены влево и распределены по ширине не равномерно.

Можно добавить в конце нужное количество пустых дивов, тогда все хорошо до тех пор пока основные не окажутся в один ряд. В этом случае:
1. они распределены по горизонтали не равномерно (справа находятся пустые дивы)
2. при увеличении ширины контейнера расстояние между дивами то увеличивается то уменьшается (уменьшается, как только справа может поместиться дополнительный пустой див )

Можно ли решить эту проблему с помощью CSS?
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 2 отправлено 18:46, 03.10.2012
так чтоли?
протестируй по уменьшай страницу
HTML code:
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. .block{
  5.         border:1px solid #000;
  6.         width:100px;
  7.         height:100px;
  8.         float:left;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <div class="block" >содержимое блока</div>
  14. <div class="block" >содержимое блока</div>
  15. <div class="block" >содержимое блока</div>
  16. <div class="block" >содержимое блока</div>
  17. <div class="block" >содержимое блока</div>
  18. <div class="block" >содержимое блока</div>
  19. <div class="block" >содержимое блока</div>
  20. <div class="block" >содержимое блока</div>
  21. <div class="block" >содержимое блока</div>
  22. <div class="block" >содержимое блока</div>
  23. <div class="block" >содержимое блока</div>
  24. </body>
  25. </html>
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 3 отправлено 21:53, 03.10.2012
arrow25
Недостаток тот же что и в способе описанном мной: справа остается пустая полоса, когда ширина страницы не кратна размеру дива
Профессор
  1. Офлайн
  2. Посетители
  3. 138 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 4 отправлено 13:17, 04.10.2012
alcrux, вообще не понимаю о чем ты. Добавь отступы, высчитай ширину
Абитуриент
  1. Офлайн
  2. Посетители
  3. 1 сообщений
  4. Сообщение
  5. Личные данные
Полезность: 0 | сообщение № 5 отправлено 15:24, 19.03.2015
HTML code:
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>Untitled Document</title>
  4. </head>
  5.  
  6. <body>
  7.  
  8. <style>
  9. #wrapper {
  10.   width:320px;
  11. }
  12. .section {
  13.   border:solid 1px #999;
  14.   float:left;
  15.   height:58px;
  16.   margin-left:10px;
  17.   margin-bottom: 10px;
  18.   width:98px;
  19. }
  20.  
  21. #wrapper div:first-child {
  22.   margin-left:
  23.   0px; color: red;
  24. }
  25.  
  26. #wrapper div:nth-child(3n+4) {
  27.   margin-left:0px;
  28.   color: red;
  29. }
  30. </style>
  31.  
  32. <div id="wrapper">
  33.   <div class="section">1</div>
  34.   <div class="section">2</div>
  35.   <div class="section">3</div>
  36.   <div class="section">4</div>
  37.   <div class="section">5</div>
  38.   <div class="section">6</div>
  39.   <div class="section">7</div>
  40.   <div class="section">8</div>
  41.   <div class="section">9</div>
  42.   <div class="section">10</div>
  43.   <div class="section">11</div>
  44.   <div class="section">12</div>
  45. </div>
  46.  
  47. </body>
 
Перейти
Найти

Доступ закрыт.

  1. Вам запрещено отвечать в темах данного форума.

Изменения статуса

  1. профиль Видимо, я последний выживший :) 01:19, 17.10.2011
  2. профиль Готов стать модератором)) 12:04, 17.09.2011
  3. профиль Восстанавливаем нормальную работу сайта и форума. 20:09, 13.09.2011