18 ноября 2010 в 3:26
Проблема думаю знакома многим: если вложенные дивы имеют определённое свойство float, родительский див "теряет" высоту, что приводит к тому, что дивы снизу наезжают на этот див
Задавать жёстко высоту не всегда приемлемо.
Фикс, о котором знают наверняка опытные верстальщики, но стал откровением для меня
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
где .clearfix - родительский слой-контейнер
Комментарии
Так то в ядерном css drupal есть класс clear-block который предназначен для этого.(ох как любим изобретать велосипеды)
Можно пример применения? overflow не из той же серии?
class="clear-block"из той же
Пример применения: листинг taxonomy/term/id. Этот дефолтный вид стандартной таксономии один на сайт (если не ставить приблуд вроде vti)
Получается, что под этим видом могут выводится ноды разного типа, в моём случае например это обычные страницы (просто тизер и заголовок) и товары (заголовок, тизер, картинка и ещё чего-то)
Так вот, для картинки я задаю
float:left, соответственно строки "ломаются" (это прежде всего видно по нижнему бордеру, отделяющему строки вида)Конечно, можно сделать вывод полей в шаблоне, но я по некоторым причинам не хочу с этим связываться. Надеюсь понятно
Или я туплю или так проще...
<br style="clear: both;" />чем же проще то, лишняя разметка, не по семантике
Гы ) Одно дело картинка в тизере подползла и другое когда каркас вот так сделан. Можно и класс брэйку прописать на худой конец. И семантика тут в принципе не причем...
Визиблити, лайнхейты ... Жесть
А если я доктайп воткну 4й? (:
это уже есть в друпале
как "вот так"?
отображение страницы дело css а не html
Ну ёпть, помешаны на Друпале. Просто ещё один способ,общий, не более того. Я вот ещё проще пример знаю - в таблицу всё запихнуть эту таксономию.
чем он проще?
Тогда тебе стоит посмотреть в сторону XSLT+XML, правда оно индексируется хреново.
зачем?
Чтоб не скучно было