html - 无法让 float 匹配 100% 宽度或扩展父级

Question

我有一些基本的 CSS，我正在尝试为论坛制作帖子布局，但我无法让它工作。

我有一个 100% 宽度的 div，它下面并排有两个 float 。它们似乎永远不会等于 100% 宽度，因此不会正确对齐。

同样，如果 float 展开，则两个 float 的父 div 不会展开，我不知道如何修复它。

这是我目前所拥有的:

CSS

.parent{
    width: 100%;
    top: 10px;
    position: relative;
    clear: both;
    color: black;
}
.line{
    height:20px;
    padding-left:10px;
    lineHeight: 20px;
    margin:0px;
    border: 1px solid black;
}
.container{
    width:100%;
    text-align: center;
    border-bottom:1px solid red;
}
.fleft{
    float:left;
    width:10%;
    text-align:left;
    margin:0px;
    padding-left:10px;
    border-right:1px solid black;
}
.fleft2{
    float:left;
    width:86%;
    text-align:left;
    margin:0px;
    padding-left:10px;    
    border-right:1px solid black;
}

HTML:

<div class="parent">

    <div class="line">

        <span style="float:left;">Test</span>
        <span style="float:right;">Test 2</span>

    </div>


    <div class="container">
        <div class="fleft"> Hello </div>
        <div class="fleft2"> Hello Message</div>
    </div>
</div> 

JS Fiddle 还提供了:

http://jsfiddle.net/yMaqR/10/

Answer 1

I have one div 100% width with two floats below it side by side. They seem to never equal 100% width and so don't line up with properly.

您必须考虑填充和边距。因此，如果您将 float 元素的宽度 + 内边距 + 边距加起来，并且它们溢出了父元素的宽度，它们将被包裹起来。因此，一个可能的解决方案是删除填充并将其添加到子元素中。

Equally the parent div of the two floats does not expand if the floats expand and i do not know how to fix it.

解决方案是使用 clearfix

更多about floats并了解它们的工作原理。