Вопрос об оболочке, содержащий плавающие div - PullRequest
Новая
       30

Вопрос об оболочке, содержащий плавающие div

5 голосов
/ 15 января 2010

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

Вот простой пример. 

<head>

<style type="text/css">
<!--
#wrapper {
height: 100%;
width: 800px;
border: 1px solid #000;
margin-right: auto;
margin-left: auto;
}
#header {
height: 100px;
width: 800px;
}
#column1 {
width: 300px;
height: 400px;
float: left;
}
#column2 {
height: 400px;
width: 300px;
float: left;
}
#navbox {
float: left;
width: 200px;
height: 400px;
}
-->
</style>

</head>

<body>

<div id="wrapper">

<div id="header">test header</div>
<div id="navbox">test navbox</div>
<div id="column1">test column1</div>
<div id="column2">test column2</div>

</div><!--Close_wrapper-->
</body>
</html>

Ответы [ 4 ]

22 голосов
/ 15 января 2010

Ответ на вопросы, содержащие float и wrap в одном предложении, обычно 

overflow: auto

:)

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

6 голосов
/ 15 января 2010

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

<div id="wrapper">

<div id="header">test header</div>
<div id="navbox">test navbox</div>
<div id="column1">test column1</div>
<div id="column2">test column2</div>

<br style="clear:both" />

</div><!--Close_wrapper-->
4 голосов
/ 15 января 2010

Вам необходимо добавить элемент с clear:both после div s.

Демо

3 голосов
/ 22 июля 2013

Я бы использовал класс: after psuedo, как показано ниже. Кажется немного более очевидным, что должно произойти, и немного меньше, чем странность браузера. Я уверен, что решение о переполнении официально не должно работать. 

#wrapper:after {
    clear:both;
    display: block;
    content: " ";
}
...