как сделать отделение для обертывания двух отделений плавающих внутри?
это зависит от "глубины рекурсии". это зависит от того, насколько вызов функции наверху будет влиять на общее время выполнения.
, Например, вычисляя классический факториал рекурсивным способом очень неэффективно из-за: - риск переполнения данных - риск переполнения стека - вызов функции наверху занимает 80% времени выполнения
при разработке алгоритма минимакса для анализа положения в игре шахмат, которые проанализируют последующие перемещения N, может быть реализован в рекурсии по "аналитической глубине" (поскольку я делаю ^_^)
6 ответов
Это обычная проблема, когда у вас есть два поплавка внутри блока. Лучший способ исправить это - использовать clear: both после второго div .
<div style="display: block; clear: both;"></div>
Это должно заставить контейнер иметь правильную высоту.
Помимо хака clear: both , вы можете пропустить дополнительный элемент и использовать overflow: hidden в обертке div ]:
<div style="overflow: hidden;">
<div style="float: left;"></div>
<div style="float: left;"></div>
</div>
Это должно сработать:
<div id="wrap">
<div id="nav"></div>
<div id="content"></div>
<div style="clear:both"></div>
</div>
overflow:hidden (as mentioned by @Mikael S) doesn't work in every situation, but it should work in most situations.
Another option is to use the :after trick:
<div class="wrapper">
<div class="col"></div>
<div class="col"></div>
</div>
.wrapper {
min-height: 1px; /* Required for IE7 */
}
.wrapper:after {
clear: both;
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
content: ".";
font-size: 0;
}
.col {
display: inline;
float: left;
}
And for IE6:
.wrapper { height: 1px; }
<html>
<head>
<style>
#main { border: 1px #000 solid; width: 600px; height: 400px; margin: auto;}
#one { width: 20%; height: 100%; background-color: blue; display: inline-block; }
#two { width: 80%; height: 100%; background-color: red; display: inline-block; }
</style>
</head>
<body>
<div id="main">
<span id="one">one</span><span id="two">two</span>
</div>
</body>
</html>
Секрет - это встроенный блок . Если вы используете границы или поля, вам может потребоваться уменьшить ширину используемого div.
ПРИМЕЧАНИЕ. Это не работает должным образом в IE6 / 7, если вы используете «DIV» вместо «SPAN». (см. http://www.quirksmode.org/css/display.html )
Перемещать все.
Если у вас есть плавающий div внутри не плавающего div , все становится ужасно. Вот почему большинство фреймворков CSS, таких как Blueprint и 960.gs, используют плавающие контейнеры и div .
Чтобы ответить на ваш конкретный вопрос,
<div class="container">
<!--
.container {
float: left;
width: 100%;
}
-->
<div class="sidebar">
<!--
.sidebar {
float: left;
width: 20%;
height: auto;
}
-->
</div>
<div class="content">
<!--
.sidebar {
float: left;
width: 20%;
height: auto;
}
-->
</div>
</div>
должен работать нормально, пока вы float: left; все ваши