Как добавить нижний отступ к div, который содержит плавающие div?
У меня есть div, содержащий другие плавающие div:
<div id = "parent">
<div style = "float: left;"> текст </div>
<div style = "float: left;"> текст </div>
<div style = "float: right;"> текст </div>
</div>
Как я могу добавить нижний отступ к родительскому div и заставить его работать в IE6 (или, другими словами, избежать ошибок в IE6)?
Спасибо
Ответы 5
Попробуйте переместить родительский div.
коробочная модель взлома, в основном обеспечивающий заполнение IE, должно помочь
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>demo</title>
<style type = "text/css">
<!--
div {
height:100px;
border:1px solid black;
padding-bottom:10px;
}
div {
\height: 140px;
h\eight: 100px;
}
-->
</style>
</head>
<body>
<div id = "parent" style = "float:left;">
<div style = "float:left;">text</div>
<div style = "float:left;height:100px">text</div>
<div style = "float:right;">text</div>
</div>
</body>
</html>
IE, похоже, не вычисляет высоту родителя, когда все дочерние элементы плавают. Если вам удастся применить фиксированную высоту к родительскому элементу, вы сможете добавить нижний отступ.
Если вы не можете исправить высоту родительского элемента, следующее, что я сделаю, это посмотрю, есть ли способ удалить float из самого высокого дочернего div. Это даст родительскому div фактическую высоту, а затем должно появиться нижнее заполнение.
В моем файле сброса CSS есть код "clearfix":
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
* html .clearfix {height:1px;}
Выглядит странно, но отлично работает во ВСЕХ распространенных браузерах: IE6 / 7, FF2 / 3, Opera, Safari.
Как использовать?
Что-то вроде этого:
<div class = "clearfix">
<div class = "floatLeft">
left div
</div><!-- /.floatLeft-->
<div class = "floatRight">
right div
</div><!-- /.floatRight-->
</div><!-- /.clearfix-->
ВНИМАНИЕ! Используйте НЕТ класс clearfix в нижних колонтитулах (или, наконец, в элементе на странице), иначе у вас будет некрасивое пространство под всем содержимым.
Как и один из других ответов, этот работал у меня в Firefox и использует немного меньше кода. Я думаю, что это хорошо работает и в других браузерах, но вы должны подтвердить.
.clearFix::after{
content: '';
display: block;
clear: both;
}