我已经开始使用div而不是表格了。 我有一个带有重复图像作为背景的容器。由于我的动态内容,它需要自动调整大小。 我遇到的问题是我想在这个容器中并排放置两个div。 当我浮动这些div时,这会导致我的汽车容器div不随其展开。解决问题的唯一方法是将容器设置为我无法做到的高度,因为每个动态页面上的容器都会有所不同。
http://www.blockdesigns.co.uk/html5.php这是我的榜样。
代码:
<body>
<div id="main_wrapper">
<header id="top_header">
</header>
<div id="main_body">This part should go all the way down to the footer.<br>
<div id="leftside">Float left div here</div>
</div>
<footer id="footer">
</footer>
</div>
</body>
CSS
#main_wrapper{
width:1000px;
margin: 20px auto;
text-align:left;
}
#main_body{
background:url(Body1000.jpg);
background-repeat:repeat;
text-align:center;
width:1000px;
}
#leftside{
float:left;
width:200px;
height:300px;
margin:10px;
}
答案 0 :(得分:3)
将overflow: hidden;
添加到main_body
示例强>
#main_wrapper {
width: 1000px;
margin: 20px auto;
text-align: left;
}
#main_body {
background: url(Body1000.jpg);
background-repeat: repeat;
text-align: center;
width: 1000px;
overflow: hidden;
}
#leftside {
float: left;
width: 200px;
height: 300px;
margin: 10px;
}