Теги Div внутри тегов Div не работают в Firefox или Chrome - PullRequest
Новая
       4

Теги Div внутри тегов Div не работают в Firefox или Chrome

3 голосов
/ 15 сентября 2011

Это кажется невероятно простым, но я понятия не имею, почему я не могу поместить тег div внутри тега контейнера контейнера, так как он не будет отображаться в Firefox или Chrome должным образом, , но он работает в IE6... ???Код выглядит следующим образом: 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>

<body>
<div id="container">
    <div id="nav">
        <p>Hello</p>
    </div>
</div>
</body>
</html>

CSS: style.css 

body {
    background:white;
    font-family: sans-serif;

}
#container {
    margin:0 auto;
    width:960px;
    background:#e3e3e3;
    border:1px solid black;
}
#nav {
    padding:10px;
    margin-top:10px;
    float:left;
    width: 400px;
    height:100px;
    background:white;
    border:1 px solid black;
}

Как будто контейнер не расширяется с тегом DIV внутри него ... что дает?

Ответы [ 3 ]

5 голосов
/ 15 сентября 2011

Это распространенная проблема, с которой люди сталкиваются в CSS. Всякий раз, когда вы плаваете что-то, это родитель рушится, как вы видите. Вы можете обойти это следующими способами:

  1. установить явную высоту контейнера
  2. положить переполнение: скрытое или переполнение: автоматически для контейнера
  3. используйте взломать clearfix: http://nicolasgallagher.com/micro-clearfix-hack/

Я считаю, что №2 - самый простой и лучший в большинстве случаев. Используйте # 3 при переполнении: скрытый / авто имеет нежелательный побочный эффект.

4 голосов
/ 15 сентября 2011

Это потому, что #nav div перемещается влево. Плавающие элементы - это просто плавающие элементы, и они не имеют высоты, если только что-то не закрепит поле под ним, очистив поплавки. 

 .clear { clear: both }

и добавьте div под плавающим div, чтобы очистить его. 

 <div id="container">
     <div id="nav">
         <p>Hello</p>
     </div>
      <div class="clear"></div>
 </div>

См. Этот вопрос SO для очень подробного ответа об исправлениях: Какие методы «clearfix» я могу использовать?

0 голосов
/ 15 сентября 2011

До overflow: hidden для #container.

Это одно известное ограничение плавания.

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

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

...