Question

我有一些基本的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/

Answer 1

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

你必须考虑填充和放大余量。因此，如果你加上浮动元素的宽度+填充+边距并且它们溢出父级的宽度，它们将被包装。因此，一种可能的解决方案是删除填充并将其添加到子元素中。

如果浮动扩展并且我不知道如何解决它，两个浮点数的父div也不会扩展。

解决方案是使用clearfix

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

无法获得浮动以匹配100％宽度或扩展父级

1 个答案: