0

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

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

同样，如果浮动扩展并且我不知道如何修复它，则两个浮动的父 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/

4

1 回答 1

1

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

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

同样，如果浮动扩展并且我不知道如何修复它，则两个浮动的父 div 不会扩展。

解决方案是使用clearfix

更多关于花车和了解它们如何工作的信息。

于 2013-06-30T01:44:59.237 回答