Как добавить нижний отступ к элементу div, который содержит плавающие элементы div? - PullRequest
Новая
       11

Как добавить нижний отступ к элементу div, который содержит плавающие элементы div?

3 голосов
/ 02 января 2009

У меня есть div, который содержит другие плавающие div:


text

text

text

Как добавить нижний отступ к родительскому div и заставить его работать в IE6 (или другими словами избежать ошибок в IE6)?

Спасибо

Ответы [ 5 ]

5 голосов
/ 02 января 2009

В моем файле сброса 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 для нижних колонтитулов (или для последнего элемента на странице), в противном случае у вас будет некрасивое пространство под всем содержимым.

3 голосов
/ 02 января 2009

Попробуйте добавить родительский div.

1 голос
/ 02 января 2009

IE не вычисляет высоту родительского элемента, когда все дочерние элементы плавают. Если вы можете избежать применения фиксированной высоты к родительскому элементу, вы сможете добавить нижний отступ.

Если вы не можете зафиксировать высоту родительского элемента, я бы хотел посмотреть, есть ли способ удалить float из самого высокого дочернего элемента div. Это даст родительскому div фактическую высоту, и тогда должен появиться нижний отступ.

1 голос
/ 02 января 2009

Взлом блочной модели , в основном обеспечивающий специфичные для 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>
0 голосов
/ 16 января 2015

Подобно одному из других ответов, этот работал для меня в Firefox и использует немного меньше кода. Я думаю, что это хорошо работает и в других браузерах, но вы должны подтвердить. 

.clearFix::after{
content: '';
display: block;
clear: both;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...