0

我已经开始使用 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;
    }
4

1 回答 1

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;
}
于 2013-07-05T22:31:25.167 回答