html - Div 高度 HTML/CSS

标签 html css

我的 html/css 代码在这里需要一点帮助...我需要跟随我的 divbody 的高度到 divwrapper,因为 divwrapper 向左浮动,我的 divbody 的高度只有 10(有填充值5 像素)。这是代码,谢谢!

<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>

最佳答案

使用 clearfix 方法解决 float 问题。

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 */

这是一个 example
Here您可以找到有关 clearfix 的更多信息。

关于html - Div 高度 HTML/CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17613569/

相关文章:

html - 当我使用 Flexbox 添加更多图像时,图像会被压扁

javascript - 更改段落文本并突出显示菜单项单击

jquery - 输入style=文件作为按钮

html - CSS 按钮边框在 Chrome 中不起作用

javascript - 无法选择 tr 不包含 jquery 中的元素

javascript - "if"语句参数未按预期运行。 JavaScript

html - 三边渐变渐变

javascript - 使用 JQuery 在 td 单击或复选框单击时更改 td 的 CSS

html - 如何为 Hugo 中的一种元素添加默认的 CSS 类?

html - 如何创建 "go to page"表单?