Комментарии 65
Неясно почему минусуют. Ведь была уже статья, кто-то переводил раньше уже. Зачем делать одну работу несколько раз?
chikuyonok.ru/2011/04/inline-vertical-align/ статья от всеми нами любимого автора Сергея Чикуёнка — подход очень похожий
На самом деле, для укрощения старых IE достаточно использовать тэги, которые по умолчанию ведут себя как inline-block: например, ins и del.
Вот пример использование, когда товары в магазине автоматически выстраиваются в подходящее число колонок по ширине в зависимости от ширины окна браузера (надеюсь не рухнет). Сам метод описывал еще лет 5 назад один из сотрудников студии Лебедева (по крайней мере я узнал от них).
Может это и не самое кошерное решение с точки зрения семантики, зато оно простое и главное работающее без хаков под каждую версию браузера.
<ins style="display: inline-block;width: 25%; ">
<div style="float: left; width: 100%;">
это инлайн-блок
</div>
</ins>
Вот пример использование, когда товары в магазине автоматически выстраиваются в подходящее число колонок по ширине в зависимости от ширины окна браузера (надеюсь не рухнет). Сам метод описывал еще лет 5 назад один из сотрудников студии Лебедева (по крайней мере я узнал от них).
Может это и не самое кошерное решение с точки зрения семантики, зато оно простое и главное работающее без хаков под каждую версию браузера.
Единственное, у вас в конце, где 3 букета, они выравниваются по середине.
«для укрощения старых IE достаточно использовать» любый inline элементы + hasLayout
Полезная вещь.
Я делал по другому: брал все в дивы и после 4го дива писал
Я делал по другому: брал все в дивы и после 4го дива писал
zoom: 1;
display:-moz-inline-box;
-moz-box-orient:vertical;
display:inline-block;
_display:inline;
*display:inline;
vertical-align: top;
По-моему работает без всяких обверток в лишние div, в том числе в FF2.
display:-moz-inline-box;
-moz-box-orient:vertical;
display:inline-block;
_display:inline;
*display:inline;
vertical-align: top;
По-моему работает без всяких обверток в лишние div, в том числе в FF2.
Чем дольше поддерживаешь IE6, тем дольше он проживет.
Я в таких случаях просто использую таблицу. Несмотря на то, что идеалогически это куда более худшее решение, оно значительно быстрее рендерится в браузерах.
Несколько дней назад столкнулся с подобной проблемой — допилил функционал сортировки таблицы на мониторинге, в итоге заметил неправильное отображение в ИЕ7 (под ИЕ6 — не делали, согласно ТЗ) ссылок из серии Добавить в закладки/избранное/на сайт. display: inline-block в ИЕ7 не работал почему-то.
Оказалось, если в <div>`е есть несколько <a> и <p>, то inline-block — не работал, а inline — не поддерживает border как надо. Выход — замена <p> на <span> — возможно, технологи скажут, что это семантически неверно, но работает.
Оказалось, если в <div>`е есть несколько <a> и <p>, то inline-block — не работал, а inline — не поддерживает border как надо. Выход — замена <p> на <span> — возможно, технологи скажут, что это семантически неверно, но работает.
CSS-хаки можно использовать более элегантно:
li {
min-height: 250px;
height: auto !important; // IE6 в одном селекторе игнорирует important
height: 250px;
display: inline;
display: inline-block; // IE такого не знает и воспользуется предыдущим свойством
zoom: 1;
}
li {
min-height: 250px;
height: auto !important; // IE6 в одном селекторе игнорирует important
height: 250px;
display: inline;
display: inline-block; // IE такого не знает и воспользуется предыдущим свойством
zoom: 1;
}
Превосходная статья, не встречал раньше подобного метода. Теперь буду использовать! Спасибо за перевод.
Хорошее решение. Но я бы использовал джаваскрипт, просто чтобы выровнять высоту всех блоков по самому высокому +3px
И тоже самое при попытке изменить размер окна
И тоже самое при попытке изменить размер окна
Легендарная прямо таки статья
FF2 уже вне игры, хаки для IE в эпоху Conditional Comments смотрятся как атавизм.
Что еще удивительно, нашлось немало тех, кто за два года с выхода статьи, ни разу на неё не наткнулся.
Или это хабр глючит выдавая архивные посты?
Что еще удивительно, нашлось немало тех, кто за два года с выхода статьи, ни разу на неё не наткнулся.
Или это хабр глючит выдавая архивные посты?
Во-первых firefox 2 уже давно морально устарел и вот это можно выкинуть
Во-вторых на резиновых сайтах возникали проблемы с таким кодом для firefox 2, так что там все чуть сложнее было, если кому надо могу поискать решение
В-третьих вы не решили проблему отступов у inline элементов, тоесть если убрать маргины то блоки будут не вплотную друг к другу стоять. Там нужно у контейнера несколько параметров обнулить, а у вложенного тега все восстановить.
Ну и код для ие6 — 7 лучше выносить в CC, но это и так все знают ))
display: -moz-inline-stack;Во-вторых на резиновых сайтах возникали проблемы с таким кодом для firefox 2, так что там все чуть сложнее было, если кому надо могу поискать решение
В-третьих вы не решили проблему отступов у inline элементов, тоесть если убрать маргины то блоки будут не вплотную друг к другу стоять. Там нужно у контейнера несколько параметров обнулить, а у вложенного тега все восстановить.
Ну и код для ие6 — 7 лучше выносить в CC, но это и так все знают ))
Вот кстати сниппет, для того чтобы убрать отступы между inline-block блоками
snipplr.com/view/49933/display-inlineblock-/
может кому пригодится
snipplr.com/view/49933/display-inlineblock-/
может кому пригодится
Еще
-moz-inline-stack; не работал в связке с position:relative;, а в Opera inline-block + relative переодически глючит до сих пор. 
не баг, а фича
developer.mozilla.org/en/XUL_Tutorial/Stacks_and_Decks
developer.mozilla.org/en/XUL_Tutorial/Stacks_and_Decks
И тут на помощь приходит дремучий. Как ни странно, это было бы лучшим решением.
Пардон. Дремучий table
Да, хороший рецепт. 10 июня прошлого года я приводил гиперссылку на сборник, состоящий из этого и нескольких других преполезнейших рецептов (общим числом полсотни), так что очень рад, что у Вас дошли руки перевести один из них. Поглядите на них — быть может, и другие приглянутся для перевода или хотя бы употребления.
Привет вам из позапрошлого года.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Кроссбраузерный inline-block