Возникли проблемы с плавающими div в HTML с использованием свойства CSS "float"? - PullRequest
Новая
       3

Возникли проблемы с плавающими div в HTML с использованием свойства CSS "float"?

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

У меня есть проблема с моим div. В настоящее время у меня есть четыре «div» в HTML, которые выглядят как ниже. То, что я хочу сделать, это иметь все на моей странице внутри div «page». Внутри «основного» div у меня есть div «content» и «side», и оба имеют свойство «float: left» из CSS. Что происходит, так это то, что, когда я делаю это, я теряю фон моего div «page», который белый. Как я могу предотвратить это и создать свой контент и сторонние элементы? Я знаю, что это легко, но по некоторым причинам я не понимаю это правильно. Любая помощь будет оценена.

Спасибо 

<div id=”page”>
   <div id=”container”>
   </div>
   <div id=”main”>
      <div id=”content”>
      </div>
      <div id=”side”>
      </div>
   </div>
</div>

Это мой код CSS 

#page 
{
margin: 2em auto;
max-width: 1000px;
background-color:#fff;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740PX;;
float:left;
}

#side
{
width:250px;
margin:5px;
float:left;
}

Ответы [ 4 ]

4 голосов
/ 07 февраля 2012

Причина, по которой вы теряете фон вашего div, заключается в том, что он содержит только плавающий контент, из-за чего он не имеет высоты. Как только что-то «очистит» поплавки, оно снова займет место. Попробуйте добавить это после main div (вместо этого вы можете использовать стиль в таблице стилей): 

<div style="clear: both;"></div>
3 голосов
/ 07 февраля 2012

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

Чтобы содержать дочерние поплавки, проще всего применить overflow: auto.

Так попробуйте это: 

#page {
    margin: 2em auto;
    max-width: 1000px;
    background-color:#fff;
    overflow: auto;
}
3 голосов
/ 07 февраля 2012

То, что я считаю, происходит, когда вы назначаете что-либо как float, его "высота" действительно не представляется его родительскому элементу. Ваша страница div теперь думает, что она имеет высоту ничего из-за плавающих элементов внутри. Добавьте <br style="clear:both;height:1px" /> после "бокового" div. Добавление этого приведет к «очистке» плавающего элемента div, поэтому его высота будет отображена не полностью.

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

1 голос
/ 07 февраля 2012 
    <html><head>
<style type="text/css">
#page 
{
margin: 2em auto;
max-width: 1000px;
width:1000px;
background-color:#000;
height:600px;
}

#main
{
clear: both;
padding: 1.625em 0 0;
width:700px;
background-color:#fff;
}

#content 
{
clear: both;
padding: 1.625em 0 0;
width:740px;
height:200px
float:left;
background-color:blue;
}

#side
{
width:250px;
height:100px;
margin:5px;
float:left;
background-color:yellow;
}
</style>
</head>

<body>
<div id="page">
   <div id="container">
   </div>
   <div id="main">
      <div id="content">
      </div>
      <div id="side">
      </div>
   </div>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...