<div> с не будет гнездиться - PullRequest
1 голос
/ 22 февраля 2012

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

HTML & CSS:

<html>
<head>
<title>Css test</title>
<style>
  .rightholder_empty {
    padding:15px;
    margin:0 auto;
    border: solid 6px #e8e8e8;
    background: #f5f5f5;
    -webkit-box-shadow: 0 8px 6px -6px #666;
    -moz-box-shadow: 0 8px 6px -6px #666;
    box-shadow: 0 8px 6px -6px #666;
    border-radius:4px;
    position:relative;
    width:700px;
}

.split_l {
    padding:15px;
    margin-bottom:10px;
    background: #f5f5f5;
    float:left;
    width:45%;
    position:relative;
}

.split_r {
    padding:0 15px 15px 15px;
    margin-bottom:10px;
    background: #f5f5f5;
    float:right;
    width:45%;
    border-left: solid 4px #ededed;
    position:relative;
}

</style>
</head>

<body>

<div class="rightholder_empty">
    <div class="split_l">hello<br /><br />h<br /><br />h<br /><br />h</div>
    <div class="split_r">world</div>
</div>

</body>
</html>

Ответы [ 3 ]

2 голосов
/ 22 февраля 2012

У меня была эта проблема вчера, и я почти сошел с ума! попробуйте добавить

переполнение: авто;

до rightholder_empty CSS. Это сработало для меня.

0 голосов
/ 22 февраля 2012

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

Цитата из http://www.webtoolkit.info/css-clearfix.html См решения здесь.

0 голосов
/ 22 февраля 2012

Вы должны clear вы parent DIV, потому что в child DIV's есть float, поэтому напишите так:

.rightholder_empty {
    overflow:hidden;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...