Хочу поделиться с вами найденным решением проблемы, с которой я сталкивался раньше не один раз, но нормального выхода не находил. Проблема была связана с вёрсткой нескольких блоков, которые располагаются друг за другом.
Например так:
Если высота одинакова для всех блоков, то проблем возникнуть не должно. Решалось это путём использования плавающих блоков и указания им необходимой ширины и высоты. Но что делать, если в каждом блоке разный объём контента и соответственно разная высота. В результате вёрстка могла «поехать»:
Как написал автор оригинала: «Необходимо правильное и семантичное решение с гибкостью, которой обладают таблицы»
.
Использовать будем такую структуру:
1 2 3 4 5 6 7 | <ul> <li> <img src="photo.jpg" width="75" height="75" alt="" /> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> </li> … </ul> |
и следующие стили:
1 2 3 4 5 6 7 | li { width:130px; border: 1px solid #ссс; display: inline-block; margin: 5px; padding: 5px } |
В FF3, Safari 3, Opera и IE8b2 выглядит вроде нормально, но что-то не так с вертикальным выравниванием:
На самом деле результат логичен, но это не то, что нам нужно. Чтобы скорректировать вид, сделаем выравнивание по верхней линии строки.
1 2 3 4 5 6 7 8 | li { width: 130px; border: 1px solid #ссс; display: inline-block; margin: 5px; padding: 5px; vertical-align: top } |
То что нужно. Однако в IE6 и IE7 всё совсем не так.
IE6 и IE7 не поддерживают inline-block, поэтому с помощью условных комментариев прописываем для них display:inline.
1 2 3 4 5 6 7 | <!--[if lte IE 7]> <style type="text/css"> ul li { display: inline } </style> <![endif]--> |
Оригинал: Cross-Browser Inline-Block.
Спасибо!
Ушло в избранное. Была аналогичная проблема, но решение так и не было найдено ))
Спасибо конечно за красивую иллюстрацию, но мы и так знали что 2х2 это 4. )))
jeenART, безусловно у вас выдающиеся познания в математике, но всё-таки комментируйте пожалуйста по существу.
Исчерпывающее решение, старо как мир + имеет фикс для одной проблемы с IE6: Real world practice with display:inline block across browsers
тот же самый эффект достигается с помощью:
li {
width: 130px;
border: 1px red solid;
margin: 20px;
position: relative;
float: left;
}
с теме же оговорками для IE
а как же ff2 ?
Помнится ранее для FF приходилось дописывать display:-moz-inline-stack;, т.к. и он не поддеживал display:inline-block;. Как давно у него появилась поддержка последнего?
Pepelsbey, спасибо за ссылку. Одно не понятно, разве для hasLayout уже недостаточно указания ширины.
ASSE, в начале статьи об этом.
skiff36, я не стал писать про FF2, но в оригинале автор как раз пишет о display:-moz-inline-stack для FF2.
Извиняюсь за метафорическое ворожение мыслей. Если по существу, то каждый верстальщик должен просто помнить, что если используют inline-block, то необходимо указывать в
main.css: … {display: inline-block; display: -moz-inline-box;}
ie6.css: … {display: inline;}
И всё, никаких проблем не будет ни в каком браузере.
jeenART, ок спасибо
. Возможно я выбрал неправильный заголовок для статьи, т.к. не хотел описывать как нужно использовать inline-block, а задача была показать как реализовать конкретный вышеописанный пример, который одним этим свойством не реализовать. Хотя может это тоже общеизвестный приём, но как я вижу, уже как минимум 2 человека о нём не знали.
Отличное решение недавно столкнулся с тойже проблемой плавающих блоков! Это обалденное решение! Автору спасибо!
Добавлю к вышесказанному, что {display: -moz-inline-box;} — не панацея, т.к. display: -moz-inline-box, как и также часто рекомендуемый для FF2 display: -moz-inline-stack; != display: inline-block; поэтому они часто ведут себя «совершенно не так» как ожидаешь, и каждый раз надо очень тщательно тестировать именно в FF2, т.к. при некоторых обстоятельствах все блоки сбиваются «в кучу».
Пример в демке несколько притянутый за уши, табличка 2?3 фиксированной ширины через инлайновые блоки — семантика ради семантики, инлайновые блоки имеет смысл только если не известно ни количество изображений ни ширина контейнера (что бы они аккуратно выстраивались и «плавали» при ресайзе), либо как они изначально и планировались — для блочных элементах внутри текста, например кнопок, о чем хорошо и подробно написано у Никиты Селецкого в статье Cтрочная кнопка как ссылка.
Прошу прощения за пару опечаток, поторопился.
Большое спасибо за пример. Я тоже о нем не знал, хотя нужды пока в нем не испытывал! Спасибо большое…
Денис, я обычно сталкивался с этой проблемой когда нужно сверстать каталог товаров для магазина. Обычно у каждого товара свой блок с описанием. А ширина внешнего контейнера не обязательно фиксированная, это всего лишь пример
WebMast, пожалуйста.
2 Alex: вам слово AIK о чем-нибудь говорит?
(просто больно знакомые картинки и проблема)
Dmitry, не знаю о чём вы говорите. Изображения и демо я подготовил сам. Ссылка на оригинал статьи в конце статьи.
Спасибо, хорошая статья. Использовал приведенный в статье пример для создания карты сайта. Вроде неплохо получилось.
Цитирую: «IE6 и IE7 не поддерживают inline-block»
Откровенная чушь. Я точно знаю, что это не так, потому как пользуюсь этим свойством в каждой верстке, надо просто знать один секрет. Гуглите чаще, товарищи )))
Ну коли знаете, так расскажите неведующим.
В firefox 2.0.0.4 не работает, хотя вопрос решился добавлением еще одной обертки
Про ff ниже 3-й версии выше отписали.
Это происходит из такого свойства осликов как — hasLayout
Вместо display: inline, можно поставить zoom: 1; — что так же заставит появится hasLayout (взаимодействие между элементами имеющих это свойство) и блоки встанут как надо. Вообще это для многих ситуаций срабатывает.
Спасибо вам за ваш урок)
Новый сафари все обламал. что делать? он не учитывает font-size: 0px;
Версия какая точно браузера и операционная система, потому как на маке и винде ничего не заметил.
Этот сайт не разваливается? Здесь использован тот же прием.
http://piccy.info/view3/1835851/98019dfa35be00ef4bed577c301589da/
win7 32 =) сафари начал делать отступ и перестал учитывать значение шрифта в 0 пикселей =) пока спасает только посдвигать тэги в кучу там, где это возможно.. ну а где генерятся автоматом, там думаю .что делать.
еще спасает если шрифт сделать в 1px но тогда опера итд вылетает. пробовал написать исключение для сафари, но шото с ним явно не то. не понимает он их…=/
примеры моих обдломов:
http://www.dasayt.com/
http://interpresent.com.ua/produktsiya/
http://www.wisp.net.ua/
http://www.iskusstvodereva.com/
http://unicomgroup.com.ua/
могу продолжать еще…
что делать будем? 
Спасибо, дайствительно помогло!
Как, оказывается, это просто решается