Html 并排放置 3 个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6208214/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Placing 3 div's Side by Side
提问by Hozefa
I want to place 3 divs side by side using CSS. I have gone through many posts on SO, but not getting the thing working for my project.
我想使用 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%;
}
The above does not place the div's in the correct place. I cannot seem to figure out the mistake I am making.
以上没有将 div 放在正确的位置。我似乎无法弄清楚我正在犯的错误。
回答by thirtydot
You could float: leftallthe inner divs:
你可以float: left所有的内部div：
You should fix the spelling of quotescointainerto quotescontainer.
您应该修正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;
}
回答by Freesn?w
I recently asked this exact same question.
我最近问了这个完全相同的问题。
Here is a link:
这是一个链接：
Here is my accepted answer:
这是我接受的答案：
Set the CSS display style to display:inline-block;.
This allows the element to keep it's block-like functionality, while also allowing it to be displayed inline. It's a half-way house between the two.
(But note that there are some compatibility issues with older versions of IE)
将 CSS 显示样式设置为 display:inline-block;。
这允许元素保持它的块状功能，同时还允许它内联显示。这是两者之间的中途之家。
（但请注意，旧版本的 IE 存在一些兼容性问题）
回答by Hozefa
With the advent of CSS grids, this can be better achieved it rather than using display: inlineand float.
随着 CSS 网格的出现，这可以比使用display: inline和更好地实现float。
https://jsfiddle.net/dxec62vk/
https://jsfiddle.net/dxec62vk/
Also there is good browser support for gridnow: https://caniuse.com/#feat=css-grid
现在也有很好的浏览器支持grid：https: //caniuse.com/#feat=css-grid
