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]   

> Описание: как?
Bio man
Отправлено: 28 Ноября, 2014 - 13:17:57
Post Id


Постоянный участник


Покинул форум
Сообщений всего: 2751
Дата рег-ции: Июль 2010  
Откуда: Даугавпилс, Латвия


Помог: 52 раз(а)




Нужно спозиционировать блоки, которые находятся в 1 потоке, так, как это показано на картинке.
Своими силами смог лишь спозиционировать первые 3 блока таким образом
CODE (html):
скопировать код в буфер обмена
  1. <div></div>
  2. <div></div>
  3. <div></div>

CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. div:nth-child(1) {
  3.    float: left;
  4. }
  5. div:nth-child(2) {
  6.    float: left;
  7.    clear: left;
  8. }
  9. div:nth-child(3) {
  10.    display: inline-block;
  11. }
  12.  


Есть решение в группировке по 3 элемента, но хотелось бы, что бы блоки шли в 1 потоке.
Чуть позже скину ссылку на фиддл
(Добавление)
http://jsfiddle[dot]net/eeo6dnL2/
(Добавление)
Очевидно такое http://jsfiddle[dot]net/eeo6dnL2/1/ решение, но хочется знать, возможно ли не разделять на группы
(Добавление)
Забыл сказать, табличный вариант не предлагайте, он не подходит. Дело в том, что маленькие блоки имеют различную высоту, на картинке я забыл это отобразить.
Прикреплено изображение (Нажмите для увеличения)
Безымянный.png
 
 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