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/

您应该将quotescointainer的拼写修改为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;
}

Answer 2

我最近问了同样的问题。

这是一个链接：

Inline div elements

这是我接受的答案：

将CSS显示样式设置为   显示：内联块;

这允许元素保持它   块状功能，同时也是   允许它以内联方式显示。   这是两者之间的中途。

（但请注意，有一些   兼容性问题与旧版本   IE的版本）

Answer 3

随着CSS网格的出现，这可以更好地实现，而不是使用display: inline和float。

https://jsfiddle.net/dxec62vk/

此外，grid现在还提供了良好的浏览器支持：https://caniuse.com/#feat=css-grid

并排放置3个div

3 个答案: