Question

我想要一个div边框来包围我的整个网站，但是边框不会动态移动，因为我向页面添加了元素。相反，它只围绕前两个元素，文本和图像，但不包括我的表格菜单，但如果我删除我的表格周围的div标签，那么边框将围绕表格。我需要div标签来组织我的网站，所以任何人都可以帮助我...问题似乎来自content_col1 div标签中的float标签，但我需要浮动将div标签放在彼此旁边。

继承HTML

<div id="content">          
    <div id="content_topTitle">
        Welcome to the greatest local online grocery store the world has ever seen!
    </div>
    <div id="content_images">               
        <img src="image/image1.jpg" />
    </div> 


    <!-- /////////////////////////// -->
    <!-- /////////////////////////// -->
    <!-- /////////////////////////// -->
    <!-- /////////////////////////// -->

    <div id="content_col1">

        <table width = 100% cellpadding = "0" cellspacing = "0">
        <tr>
            <td class = "departments"><a class = "departments" href="">Bakery</a></td>
        </tr>  
        <tr>
            <td class = "departments"><a class = "departments" href="">Vegetables</a></td>
        </tr>
        <tr>
            <td class = "departments"><a class = "departments" href="">Sweets</a></td>
        </tr>
        <tr>
            <td class = "departments"><a class = "departments" href="">Meats</a></td>
        </tr>
        <tr>
            <td class = "departments"><a class = "departments" href="">Dairy</a></td>
        </tr>
        <tr>
            <td class = "departments"><a class = "departments" href="">Bakery</a></td>
        </tr>
        <tr>
            <td class = "departments"><a class = "departments" href="">Vegetables</a></td>
        </tr>
        <tr>
            <td class = "departments"><a class = "departments" href="">Sweets</a></td>
        </tr>
        </table>

    </div>  
</div>

这是CSS

#content
{
background: #eee;
border: 5px solid #68accc;
padding: 0px;

}

#content_topTitle
{
text-align: center;
height: 35px;
line-height: 35px;
font-weight: bold;
}

#content_images
{
width:880px;height:200px;
}

#content_col1
{
float: left;
width: 130px;
padding: 10px;
}

Answer 1

解决问题的最简单方法是在周围元素上设置溢出，例如：

#content
{
background: #eee;
border: 5px solid #68accc;
padding: 0px;
overflow: hidden;
}

See an example here

Answer 2

一些修复方法是：在包含表格的div之后清除浮动。请参阅js fiddle here

或者在包装器div上应用一个明确的修复类，它负责浮动并使内容工作。 Js fiddle here.

Answer 3

您需要在#content div上使用clearfix。

http://css-tricks.com/snippets/css/clear-fix/

使用div标签围绕我的网站的问题

3 个答案: