CSS浮动不起作用

Question

我想构建一个这样的div：

有一个div，它是容器（700x400像素）。在容器中，还有3个div。第一个是名为'photo_id'的div。这div应该坚持到左边，而div'内容'应该坚持到右边。 photo_id和内容的高度均为266px。最后一个被称为“导航”的div应该位于其他div的下面，这样我顶部有2个div，底部有一个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，因为您希望它位于上述两个浮动元素的下方。

下面是更新后的代码：

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; 
} 

和小提琴：http://jsfiddle.net/Erf8C/1/

Answer 2

几件事情：

1. 你不需要position:absolute和bottom:0
2. 你试图瞄准div导航（.navigation），而格实际上有导航（#navigation）的ID的类

的jsfiddle：http://jsfiddle.net/aXmQg/

Answer 3

距离无处不在，它的做删除position:absolute。

Answer 4

还好这里是演示链接http://jsbin.com/towidite/1/edit

检查下面的CSS和HTML代码

.container{width:700px;border:1px solid #000;height:500px;} 
#photo_id{height:266px; background:red;float:left;width:200px;} 
#content{background:green;height:266px;float:left;width:500px;} 
#navigation{clear:left;} 
#navigation ul{margin:0 padding:0} 
#navigation ul li{display:inline-block;} 

/- HTML -/

<div class="container"> 
    <div id="photo_id"> 
     photo 
    </div> 
    <div id="content">content 
    </div> 
    <div id="navigation"> 
     <ul> 
     <li>Item1</li> 
     <li>Item2</li> 
     <li>Item3</li> 
     <li>Item4</li> 
     <li>Item5</li> 
     </ul> 
    </div> 
</div>