1

我的 html/css 代码在这里需要一点帮助...我需要跟随 divbody 的高度到 divwrapper，因为 divwrapper 向左浮动，所以我的 divbody 的高度只有 10（填充值为 5px）。这是代码，谢谢！

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Information Technology</title>
</head>
<style>

    body{
        margin:0px;
    }

    .divbody{
        width:970px;
        height:auto;
        background-color:#cecece;
        margin:0px auto;
        padding:5px;
    }

    .divwrapper{
        height:auto;
        background-color:#eee;
        float:left;
        padding:5px;
    }

    .divcontent{
        width:480px;
        height:200px;
        background-color:yellow;
        float:left;
        border-bottom:1px solid #000;
    }

</style>

<body>

    <div class="divbody">

        <div class="divwrapper">

            <div class="divcontent">

            </div>

            <div class="divcontent">

            </div>

        </div>

    </div>

</body>

4

5 回答 5

1

使用 clearfix 方法来解决您的浮动问题。

HTML

<div class="divbody clearfix">

    <div class="divwrapper">

        <div class="divcontent">

        </div>

        <div class="divcontent">

        </div>

    </div>

</div>

CSS 

body{
        margin:0px;
    }

    .divbody{
        width:970px;
        height:auto;
        background-color:#cecece;
        margin:0px auto;
        padding:5px;
    }

    .divwrapper{
        height:auto;
        background-color:#eee;
        float:left;
        padding:5px;
    }

    .divcontent{
        width:480px;
        height:200px;
        background-color:yellow;
        float:left;
        border-bottom:1px solid #000;
    }

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

这是一个示例
在这里您可以找到有关 clearfix 的更多信息。

于 2013-07-12T11:14:37.677 回答
0

添加 position: absolute;到divbody

.divbody{
        position: absolute;
        width:970px;
        height:auto;
        background-color:#cecece;
        margin:0px auto;
        padding:5px;
    }
于 2013-07-12T11:15:14.317 回答
0

添加overflow: hidden;（这是许多其他潜在选项之一）.divbody以构建新的块上下文。

浮动、绝对定位的元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而不是“可见”的块框（除非该值已被传播到视口）为其内容建立新的块格式化上下文。

阅读更多：http ://www.w3.org/TR/CSS21/visuren.html#block-formatting

演示

于 2013-07-12T11:15:41.603 回答
0

您需要添加一个overflow:auto;类divbody。它的作用是根据其子元素将自己包装起来。

工作演示

编码：

.divbody{
        width:970px;
        height:auto;
        background-color:#cecece;
        margin:0px auto;
        padding:5px;
        overflow:auto; /* The needs to be added */  
    }

希望这是您正在寻找的。

于 2013-07-12T11:16:20.370 回答
0

使用overflow: hidden;或overflow: auto;作为快速修复，我们现在正在转向新时代的现代浏览器，告别 cleat:both 或 clearfix:after

于 2013-07-12T13:00:32.170 回答