Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[54.152.77.92] |
|
Сообщ.
#1
,
|
|
|
Други, вот такая проблема... Есть div контейнер, в котором надо разместить горизонтально несколько других контейнеров. Внутри этих контейнеров, в свою очередь, должны размещаться еще контейнеры, тоже горизонтально. Думал, и у тех и у других делать float:left, но получается, что во внутренних контейнерах расположение блоков получается по вертикали. Пример
Прикреплённый файлbad2.png (5,84 Кбайт, скачиваний: 571) Если убираю во внешнем контейнере float:left, то во внутреннем все более менее встает по своим местам, но естессно блоки в нем оказываются друг под другом Прикреплённый файлbad1.png (11,85 Кбайт, скачиваний: 518) код соответсвенно такой <div class="ribbonBands"> <div class="ribbonBand"> <div class="rbContent"> <div class="rbIcon"></div> <div class="rbLayout"> <div class="rbLayoutColumn"> <a href="#">Some command here</a> <a href="#">Some another command</a> <a href="#">Yet another command</a> </div> <div class="rbLayoutColumn"> <a href="#">Some command here</a> <span>Comandeer my ass <select><option>1234</option><option>1234</option><option>1234</option><option>1234</option></select></span> <span>Yet another command <input type="text" /></span> </div> </div> </div> <div class="rbFooter">Band title</div> </div> <div class="ribbonBand"> <div class="rbContent"> <div class="rbIcon"></div> <div class="rbLayout"> <div class="rbLayoutColumn"> <a href="#">Some command here</a> <a href="#">Some another command</a> <a href="#">Yet another command</a> </div> <div class="rbLayoutColumn"> <a href="#">Some command here</a> <span>Comandeer my ass <select><option>1234</option><option>1234</option><option>1234</option><option>1234</option></select></span> <span>Yet another command <input type="text" /></span> </div> </div> </div> <div class="rbFooter">Band title</div> </div> </div> <div class="ribbonFooter"></div> div.ribbonBand { float: left; } div.rbIcon { height: 32px; width: 32px; float: left; } div.rbLayoutColumn { float: left; margin-left: .5em; } div.rbLayoutColumn a, div.rbLayoutColumn span { display: block; } div.rbLayoutColumn a { padding: .2em .5em .2em 0; } div.rbFooter { clear: both; text-align: center; } div.ribbonFooter { clear: both; } Подскажите, как мне запилить нужный мне лэйаут? Щас это сделано все на куче вложенных таблиц, хочу от этого уйти Прикреплённый файлgood.png (4,9 Кбайт, скачиваний: 575) |
Сообщ.
#2
,
|
|
|
Сделай кучей вложенных таблиц!
Добавлено Вообще, если блоки размещаются по-вертикали, значит им не хватает ширины контейнера. Добавлено Обожди. А кто у тебя должен вставать по-горизонтали, но не встаёт? rbLayoutColumn или его дети (a, span)? Добавлено зы. Картинки не смотрел |
Сообщ.
#3
,
|
|
|
а inline-block вместо флоата не вариант?
Если нет, то я за таблицы... |
Сообщ.
#4
,
|
|
|
Цитата fatalist @ а inline-block вместо флоата не вариант? такое же поведение как с float: left |
Сообщ.
#5
,
|
|
|
Дык это, без задания фиксированной ширины у ribbonBand его так и будет сплющивать...
Но я бы все-таки табличку каркасную сделал и гори оно все огнем... Все эти лейауты от лукавого, только времени куча на них уходит... |
Сообщ.
#6
,
|
|
|
Цитата fatalist @ Дык это, без задания фиксированной ширины у ribbonBand его так и будет сплющивать... почему? кстати, ширина ribbonBand гораздо больше чем, чем ширина сплющенного контента |
Сообщ.
#7
,
|
|
|
Цитата Uncle_Bob @ потому что стремится к минимуму, на сколько я понимаю...почему? последнее что приходит в голову: white-space:nowrap; но не уверен, что это вообще с блоками даже инлайновыми прокатит... Цитата Uncle_Bob @ По первому скрину этого не видно... кстати, ширина ribbonBand гораздо больше чем, чем ширина сплющенного контента |
Сообщ.
#8
,
|
|
|
Цитата fatalist @ По первому скрину этого не видно... как раз по нему и видно Добавлено Цитата fatalist @ потому что стремится к минимуму, на сколько я понимаю... вот этьо и идет в противоречие с размерами на первом скрине кстати, в ИЕ9 выглядит пучком, в FF нет |
Сообщ.
#9
,
|
|
|
Цитата Uncle_Bob @ А, в этом смысле, я имел в виду, что он явно меньше, чем два столбца рядом...как раз по нему и видно Еще одну вещь не заметил сразу: ты в курсе, что clear:both плевал на вложенность блоков? он работает на все уровни сразу... именно поэтому я в одном проекте отказался от полностью блочной верстки... еще раз посмотрел скрины, возможно как раз в этом проблема, хотя я уже ни в чем не уверен... |
Сообщ.
#10
,
|
|
|
осталось послушать начальника транспортного цеха и забить на блочную верстку
Добавлено Переделал частично разметку на ul/li, стало получше Добавлено у rbLayout не было float:left |