CSS float 像素和百分比混合

Question

好的，我想要这个:

为此，我有这段 HTML 代码:

<div id="wrapForCenter">
    <div id="title">
        title
    </div>
    <div id="contentFrame">
        <div id="imagePlaceholder">
            image
        </div>
        <div id="content">
            content
        </div>
    </div>            
    <div id="buttonsBar">
        buttonsBar
    </div>      
</div>

我有这个 CSS 代码:

#wrapForCenter
{
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -160px;
    margin-left: -240px;
    width: 480px;
    height: 320px;
    border: 1px solid black;
}

#title
{        
    width: 100%;
    height: 40px;
    background-color: Blue;
}

#contentFrame
{
    height: 240px;
    width: 480px;
}

#imagePlaceholder
{
    float: left;
    width: 100px;
    height: 100%;
    background-color: Green;
}

#content
{
    float: left;
    width: 380px; /*<-- look at this*/
    height: 100%;
    background-color: Yellow;
    overflow: auto;
}

#buttonsBar
{
    clear: left;
    width: 100%;
    height: 40px;    
    background-color: Silver;
}

如果我将内容宽度更改为 100%，为什么会出现这种情况？

我认为内容宽度将是 contentFrame 减去 imagePlacehoder 宽度(以像素为单位)，但是当我为 imagePlacehoder 和内容指定 float:left 时，内容将获得其父容器宽度。为什么？

是否有另一种方法可以在不使用 float (可能是显示:内联)的情况下获得相同的结果？并使用 width:100% 作为内容？

非常感谢。 CSS 不是我的强项。

Answer 1

这称为 float 下降。漂浮物的工作方式是，只要每个漂浮物都有足够的空间，它们就会并排放置，但如果没有足够的空间容纳，漂浮物就会向下撞到前一个漂浮物的下方。

width:100% 表示使其与其容器一样宽 (#wrapForCenter) 的 100%。自然地，如果你告诉某物是它的容器的整个宽度，那么容器内的任何一侧都不能容纳任何东西，所以作为一个 float 它必须向下移动到它之前的任何东西下方(之前的“ sibling ”)以适应。