CSS float 不起作用

Question

我想像这样构建一个 div:

有一个 div，它是容器 (700x400 px)。在容器中，还有 3 个 div。第一个是名为“photo_id”的 div。这个 div 应该贴在左边，而 div 'content' 应该贴在右边。 photo_id 和内容的高度均为 266px。最后一个名为“导航”的 div 应该在其他 div 的下面，这样我在顶部有 2 个 div，在底部有一个。你明白我的意思了吗？

这是一张图片:http://postimg.org/image/lxrxa2h49/

我不知道为什么我的代码不起作用。我做错了什么？我是 CSS 的新手，自己尝试过，但在万维网上找不到任何好的解决方案来解决我的问题!抱歉问，但我真的不知道该怎么做!

这是我的 html:

<div class="container">
    <div id="photo_id">
    </div>
    <div id="content">
    </div>
    <div id="navigation">
    </div>
</div>

这是我的 CSS:

.container {
    height: 400px;
    width: 700px;
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
}

div#photo_id {
    height: 266px;
    width: 233px;
    position: absolute;
    float: left;
}

div#content {
    height: 266px;
    width: 467px;
    position: absolute;
    float: right;
}

.navigation {
    height: 134px;
    width: 700px;
    bottom: 0;
    position: absolute;
}

Answer 1

首先，摆脱所有那些 position: absolute - 这会破坏整个设计。

其次，您的 HTML 中的导航声明不正确；您使用的是 id 而不是您在 CSS 中指定的 class。您还需要向导航添加 clear: both，因为您希望它位于上面两个 float 元素的下方。

这是更新后的代码:

HTML

<div class="container">
    <div id="photo_id">
    </div>
    <div id="content">
    </div>
    <div class="navigation">
    </div>
</div>

CSS

.container {
    height: 400px;
    width: 700px;
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
}

div#photo_id {
    height: 266px;
    width: 233px;
    float: left;
    background: red;
}

div#content {
    height: 266px;
    width: 467px;
    float: right;
    background: blue;
}

.navigation {
    height: 134px;
    width: 700px;
    bottom: 0;
    background: orange;
    clear: both;
}

和 fiddle :http://jsfiddle.net/Erf8C/1/