将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放置在正确的位置。我似乎无法找出自己的错误。

- Hozefa

Answer 1

你可以将所有内部的 div 元素都设置为 float: left：

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

- thirtydot

---

@Midas：这是一个公正的观点，但我试图为OP保持简单。我可能会像这样做：http://jsfiddle.net/W8dyy/1/。 - thirtydot

@Midas：我不打算使用三次宽度。目前只处于开发的测试阶段，所以正在创建一些原型。 - Hozefa

@DalexL：OP不确定该选择哪个 :) 请参见：http://stackoverflow.com/posts/6208214/timeline 我觉得我应该发布一个使用float的答案，就像OP的代码一样。 - thirtydot

如果引号容器的宽度太大，例如960px的1％空闲空间为9px，则其右侧有1％的空闲空间。 - Se Song

@SeSong：没错，你可以使用 width: 33.33% 来解决这个问题，或者使用基于 display: table 的方法。 - thirtydot

Answer 2

我最近问了同一个问题。

这是链接:

Inline div elements

这是我的被接受的答案:

将CSS显示样式设置为display:inline-block;。

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

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

- Freesnöw

Answer 3

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

https://jsfiddle.net/dxec62vk/

现在对于 grid，浏览器支持良好：https://caniuse.com/#feat=css-grid

- Hozefa