Question

请帮忙！我试图创建一些div部分，其中一些div部分有一些浮动的div。我已经清除了所有这些。但这些部分并没有增长以适应其中的内容。以下是我的HTML -

<div class="data">
    <div class="name">Data</div>
    <div class="first section">
        <div class="title">First Section</div>
        <div class="left settings">
            <div class="row">
                 <div class="field">First Name</div>
                 <div class="value">John</div>
            </div>
            <div class="row">
                  <div class="field">Last Name</div>
                  <div class="value">Smith</div>
            </div>
        </div>
        <div class="right settings">
            <div class="row">
                 <div class="field">ID</div>
                 <div class="value">321</div>
            </div>
            <div class="row">
                  <div class="field">Group</div>
                  <div class="value">Eng</div>
            </div>
        </div>
    </div>
    <div class="second section">
        <div class="title">Second Section</div>
    </div>
    <div class="third section">
        <div class="title">Third Section</div>
    </div>
</div>

以下是我的CSS -

div.data {
    position: relative;
    top: 1em;
    width: 100em;
}

div.data div.name {
    color: #0066FF;
    font-weight: bold;
}

div.data div.section div.title {
    color: green;
    font-weight: bold;
}

/** first section **/
div.data div.first div.settings {
    position: relative;
    width: 799px;
    border-top: 1px solid;
    float: left;
}

div.data div.first div.left {
    border-left: 1px solid;
}

div.data div.first div.settings div.row {
    border-bottom: 1px solid;
    clear: both;
    height: 2em;
}

div.data div.first div.settings div.row div {
    float: left;
    height: 22px;
    padding: 5px;
    border-right: 1px solid;
}

div.data div.first div.settings div.row div.field {
    width: 192px;
}

div.data div.first div.settings div.row div.value {
    width: 585px;
}

/** second section **/
div.data div.second {
    clear: both;
}

对于第一部分，我有一个标题和一个由左右组成的表格。这两个都向左浮动并清除。左表和右表的行有一个字段和值，它们也是左右浮动并清除。在这一点上，我希望“第一部分”随着内部内容的增长而增长。但相反，高度卡在22px，与部分标题相同的高度！

发生了什么事？我试过overflow：auto for div.section并且有效。但是，当我尝试在“第一部分”中为div.settings设置此样式时：

div.data div.first div.settings {
     position: relative;
     top: 1em;
}

我最终得到了这些滚动条，而不是高度增长以适应新的变化。一切都没有了。我真的在我的智慧结束时试图解决这个问题。如果有人能给我任何关于我做错的建议，那将是一个很大的帮助。

感谢。

Answer 1

如果您希望元素随浮动内容的高度增长，则需要自行浮动，或者在浮动内容后应用clear。

一个常见的解决方案是clearfix

        .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

    /*
     * For IE 6/7 only
     * Include this rule to trigger hasLayout and contain floats.
     */

    .clearfix {
        *zoom: 1;
    }

我不太清楚你想要针对特定情况实现的布局，但我认为你可以考虑在你的左右两个部分应用clearfix类。

https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css

我尝试重新创建问题 - http://codepen.io/anon/pen/cIoGt

如果您需要进一步的帮助，请尝试更清楚地显示问题

为什么我的DIV身高不会增长？是因为我使用花车吗？

1 个答案: