Помощник
 |
Сообщение сайта
|
 Резиновая вёрстка с автозаполнением элементами в цикле |
Alcorn
|
Сообщение
#1
|
||
 0  Группа: Active User Сообщений: 1881 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация:  0 
 |
|
||
 |
|
||
|
locky-yotu
|
 9.4.2010, 15:35;
Ответить: locky-yotu
Сообщение
#2
|
|
0 Группа: User Сообщений: 0 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация: 0
|
Т.е. контент должен быть выравнен подобно text-align:justify ?
|
|
|
|
|
Alcorn
|
Сообщение
#3
|
|
0 Группа: Active User Сообщений: 1881 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация: 0
|
Родительский блок выровнен по центру относительно окна браузера. А его внутренний контент по левому краю.
Это легко делается, если родительский блок обжимает контент. Проблема сделать так, чтобы он его обжимал. |
|
|
|
|
Zippovich
|
9.4.2010, 15:40;
Ответить: Zippovich
Сообщение
#4
|
|
0 Группа: User Сообщений: 1746 Регистрация: 10.12.2008 Поблагодарили: 0 раз Репутация: 0
|
(Alcorn @ 9.4.2010, 18:31)  Задача - заполнить один родительский блок в цикле другими блоками известного размера. Заполняется слева направо, доходит до границы родительского блока и переходит на вторую строку и так далее. Родительский блок должен обжимать!!! контент, то есть вести себя как флоатовский (или inline-block) элемент. Решения на css пока найдено не было. Можно было отправить данный вопрос на конкурс вёрстки, но только в том случае, если кто-то знает решение без применения javascript. 2 варианта: 1. обертка таблицей. 2. width ячеек в %, что бы в сумме давали 100% со всеми маржинами и паддингами. П.С.: вообще-то смутно понятно что Вы имеете ввиду под словом "обжимать". Объясните более детально. |
|
|
|
|
Alcorn
|
Сообщение
#5
|
|
0 Группа: Active User Сообщений: 1881 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация: 0
|
1. с таблицей тот же эффект.
|
|
|
|
|
Zippovich
|
9.4.2010, 15:47;
Ответить: Zippovich
Сообщение
#6
|
|
0 Группа: User Сообщений: 1746 Регистрация: 10.12.2008 Поблагодарили: 0 раз Репутация: 0
|
(Alcorn @ 9.4.2010, 18:46) 1. с таблицей тот же эффект. П.С.: вообще-то смутно понятно что Вы имеете ввиду под словом "обжимать". Объясните более детально. |
|
|
|
|
Alcorn
|
Сообщение
#7
|
|
0 Группа: Active User Сообщений: 1881 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация: 0
|
[php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head><title></title> <style> .a { border:2px solid aqua; text-align:center; min-width:1000px; } .b { border:2px solid blue; display:inline-block; text-align:left; } .b div { display:inline-block; border:1px solid red; } div { margin:5px; } </style> </head> <body> <div class="a"> <div class="b"> <div style="width:800px;">1</div> <div style="width:500px;">2</div> </div> <div> </body> </html> [/php] В Опере отображается как надо. В FF и остальных браузерах - нет. |
|
|
|
|
Alcorn
|
Сообщение
#8
|
|
0 Группа: Active User Сообщений: 1881 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация: 0
|
В Опере как раз видно, что контент обжимается синим блоком. Красные блоки будут все одинаковые, по ширине 300px. Самый верхний блок цвета aqua - тоже резиновый и зависит от разрешения экрана.
|
|
|
|
|
Zippovich
|
9.4.2010, 16:13;
Ответить: Zippovich
Сообщение
#9
|
|
0 Группа: User Сообщений: 1746 Регистрация: 10.12.2008 Поблагодарили: 0 раз Репутация: 0
|
(Alcorn @ 9.4.2010, 18:54) В Опере как раз видно, что контент обжимается синим блоком. Красные блоки будут все одинаковые, по ширине 300px. Самый верхний блок цвета aqua - тоже резиновый и зависит от разрешения экрана. Приходит на мысль только js реализация: Если блоки не вмещаются в одну линию, тогда убрать display: inline-block у внутренних блоков. |
|
|
|
|
Alcorn
|
Сообщение
#10
|
|
0 Группа: Active User Сообщений: 1881 Регистрация: 13.6.2009 Поблагодарили: 0 раз Репутация: 0
|
Пока тоже остановился на js. Но прежде чем браться за реализацию на js, хотелось бы убедиться, что несуществует решения на css.
|
|
|
|
|
|
Похожие темы
| Тема | Ответов | Автор | Просмотров | Последний ответ | |
|---|---|---|---|---|---|
 |
Прототипирование + дизайн + вёрстка = красивый и эффективный сайт под ключ | 0 | bunneh | 317 | 16.4.2024, 18:02 автор: bunneh |
 |
Вёрстка HTML-писем | 30 | Vampler | 29355 | 27.3.2024, 12:41 автор: Vampler |
|
Google запускает новый браузер элементами искусственного интеллекта | 38 | arendator | 13469 | 21.3.2024, 18:10 автор: Rebex |
|
 Вёрстка лендинга + адаптивностьИщу исполнителя. Сверстать макет из PSD |
4 | zik | 2192 | 2.8.2022, 16:56 автор: zik |
|
Дизайн любой сложности и вёрстка под любую CMS |
14 | IT_alien | 4521 | 15.2.2021, 18:16 автор: IT_alien |
|
Текстовая версия | Сейчас: 19.4.2024, 11:25 |
