Когда делаешь сайт приходится помнить кучу мелочей. Эта куча делает жизнь интересной и неожиданной. Элементы WEB - страниц делятся на блоковые и строчные. Строчные размещаются на странице в одной строке, блочные — каждый в новой. Но иногда есть необходимость, что бы блочные элементы размещались так же, как и строчные. Для этого есть директива CSS: display. Добавляем в стиль: display: inline-block; и все замечательно.
Но, всегда есть это «НО».
Internet Explorer чихал на эту директиву. Для того, что бы информация корректно отображалась в IE нужно указать ещё одну директиву, по этому добавляем: float: left;.
Другие браузеры не возражают и продолжают размещать элементы правильно, «в одной строке». Но опять присутствует «НО». Появление в описании стиля директивы float: left;, приводит к вырождению по высоте родительского элемента, и расположенные ниже него элементы начинают перекрывать его содержимое...
Для решения этого в просторах Интернета нашёл следующие рекомендации:
#content-id .parent-block:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #content-id .parent-block { display: inline-block; } html[xmlns] #content-id .parent-block { display: block; } * html #content-id .parent-block { height: 1%; }
Пользователей онлайн: 0.
Карта сайтаРедакцияАвторыВсе блоги
