0

请帮忙！我正在尝试创建一些 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，与部分标题的高度相同！

到底是怎么回事？我为 div.section 尝试了 overflow:auto 并且有效。但是当我尝试在“第一部分”中为 div.settings 设置这种样式时：

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

我最终得到了这些滚动条，而不是增加高度以适应新的变化。一切都不正常了。我真的无计可施，试图弄清楚这一点。如果有人可以就我做错的事情给我任何建议，那将是一个很大的帮助。

谢谢。

4

1 回答 1

1

如果您希望一个元素随着其浮动内容的高度而增长，它要么需要自己浮动，要么在浮动内容之后应用清除。

一个常见的解决方案是 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

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

于 2012-09-27T21:36:10.773 回答