Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Резиновые блоки с обтеканием в зависимости от ширины экрана

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
Поиск в теме | Версия для печати
Designer
Отправлено: 21 Мая, 2014 - 15:36:58
Post Id


Гость


Покинул форум
Сообщений всего: 66
Дата рег-ции: Нояб. 2011  


Помог: 0 раз(а)
Здравствуйте!
Необходимо разместить резиновые блоки по горизонтали с обтеканием в зависимости от ширины браузера, но таким образом что бы количество блоков в строке было не более 2х, при минимальной ширине каждого в 335px, и растягивались они до одинаковой ширины
Пробовал float, но в таком случае блоки не растягиваются(это по-моему единственная проблема из за которой я прошу помощи)
 
 Top
DelphinPRO
Отправлено: 21 Мая, 2014 - 15:57:58
Post Id



Активный участник


Покинул форум
Сообщений всего: 7187
Дата рег-ции: Февр. 2012  


Помог: 353 раз(а)
CODE (html):
скопировать код в буфер обмена
  1. <div class="wrapper">
  2.     <div class="item">1</div>
  3.     <div class="item">2</div>
  4.     <div class="item">3</div>
  5.     <div class="item">4</div>
  6.     <div class="item">5</div>
  7. </div>


CODE (css):
скопировать код в буфер обмена
  1. .wrapper {
  2.     text-align: justify;
  3. }
  4. .wrapper:after {
  5.     content:'';
  6.     width: 100%;
  7.     height: 1px;
  8.     display: inline-block;
  9. }
  10.  
  11. .item {
  12.     display: inline-block;
  13.     vertical-align: top;
  14.     min-width: 335px;
  15.     width: 40%;
  16.    
  17.     // Для наглядности демо-примера
  18.     background:yellow;
  19.     margin-bottom: 30px;
  20. }

(Добавление)
http://jsfiddle[dot]net/w798K/


-----
Чем больше узнаю, тем больше я не знаю.
 
 Top
Designer
Отправлено: 21 Мая, 2014 - 17:12:45
Post Id


Гость


Покинул форум
Сообщений всего: 66
Дата рег-ции: Нояб. 2011  


Помог: 0 раз(а)
Спасибо большое, только пришлось убрать :after весь, из за него блоки не выстраивались как нужно
 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB