包含浮动div时的包装问题 [英] Wrapper question when containing floating divs
本文介绍了包含浮动div时的包装问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个以浏览器为中心的边框，在各种div之间自动展开高度。当使用浮动以保持div在线时，包装器在第一个div之后停止。这是一个很简单的例子。
I would like to create a, browser centered, bordered, wrapper that autoexpands in height around various divs. When using floats to keep the divs in-line, the wrapper just stops after the first div. Be kind, this may or may not be right way to do this but that's why I'm here.
这是一个简单的例子。 b
Here is a simple example.
<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>
推荐答案
> float 和 wrap 通常是
The answer to questions that contain float and wrap in one sentence is usually
overflow: auto
：）
如果您想让包装程序自动展开高度，应该。
If you want your wrapper to auto-expand in height, that should do it.
这篇关于包含浮动div时的包装问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
