并排放置3个div

Question

我想使用CSS并排放置3个div.我在SO上经历了很多帖子,但没有让我的项目工作.

#quotescointainer{
    width: 100%;
    font-size: 12px;
}
#quotesleft{
    float:left; 
    width: 33%;
    background-color: white;
}
#quotescenter{ 
    background-color:white;
    width: 33%;
}
#quotesright{
    float:left;
    width: 33%;
}

以上不会将div放在正确的位置.我似乎无法弄清楚我犯的错误.

Answer 1

你可以做float: left 所有的内心div:

http://jsfiddle.net/W8dyy/

你应该修改quotescointainerto 的拼写quotescontainer.

#quotescointainer{
    width: 100%;
    font-size: 12px;
    overflow: hidden; /* contain floated elements */
    background: #ccc
}
#quotesleft {
    float: left; 
    width: 33%;
    background-color: #bbb;
}
#quotescenter { 
    float: left;
    background-color: #eee;
    width: 33%;
}
#quotesright{
    float: left;
    width: 33%;
    background-color: #bbb;
}