Html 在父 Div 中放置多个 Div（并排）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15561669/
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 multiple Divs (side by side) within a parent Div
提问by corecase
My goal is to place four divs within a single "container" div. Here's my code so far:
我的目标是在一个“容器”div 中放置四个 div。到目前为止，这是我的代码：
HTML
HTML
<body>
<div id="navBar">
<div id="subDiv1">
</div>
<div id="subDiv2">
</div>
<div id="subDiv3">
</div>
<div id="subDiv4">
</div>
</div>
</body>
CSS
CSS
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
margin-left: 25%;
}
#subDiv3
{
float: left;
margin-left: 50%;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
margin-left: 75%;
}
As far as I know this is the only part of my code that's relevant to my question so I left some other parts out.. Don't mind the width and margin of the navBar, because it's actually within another container as well.
据我所知，这是我的代码中唯一与我的问题相关的部分，所以我省略了其他一些部分。不要介意导航栏的宽度和边距，因为它实际上也在另一个容器中。
P.S I searched Google and StackOverFlow and I could not find an answer that was helpful. There were many questions about placing two divs within a single div, but none for aligning multiple divs within a single div.
PS 我搜索了 Google 和 StackOverFlow，但找不到有用的答案。关于在单个 div 中放置两个 div 有很多问题，但没有在单个 div 中对齐多个 div 的问题。
Thanks for any help in advance!
提前感谢您的任何帮助！
回答by j08691
I'd do two things, get rid of the margins on your floated divs and add the box-sizing rule.
我会做两件事，去掉浮动 div 上的边距并添加框大小规则。
#navBar {
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4 {
width: 25%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
box-sizing:border-box;
}
#subDiv1 {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
}
#subDiv2 {
float: left;
}
#subDiv3 {
float: left;
}
#subDiv4 {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
回答by zb'
You can use display: table
您可以使用 display: table
.menu {
display: table;
width: 100%;
border: 1px solid black;
border-right: none;
box-sizing: border-box;
}
.menu > div {
display: table-row;
background-color: green;
}
.menu > div >div {
border-right: 1px solid black;
display: table-cell;
text-align: center;
}
@media screen and (max-width: 400px) {
.menu {
display: block;
float: left;
width: auto;
border: none;
}
.menu > div {
display: block;
}
.menu > div > div {
border: none;
padding-right: 10px;
display: block;
text-align: left;
}
}
回答by munch1324
The main issue that I saw with your css is that you add in a margin for each float item. This would make sense if it was positioned absolutely. Since it isn't the divs will stack. Removing the margins will allow the divs to fit in the container:
我在您的 css 中看到的主要问题是您为每个浮动项目添加了边距。如果它是绝对定位的，这将是有意义的。因为它不是 div 会堆叠。删除边距将使 div 适合容器：
#navBar
{
width: 75%;
height: 75px;
margin-left: 25%;
margin-right: auto;
margin-top: 2%;
border-width: 1px;
border-style: solid;
border-radius: 10px;
border-color: #008040;
overflow: hidden;
}
#subDiv1, #subDiv2, #subDiv3, #subDiv4
{
width: 24%;
height: 75px;
border-width: 1px;
border-color: #000;
border-style: solid;
}
#subDiv1
{
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
float: left;
margin-left: 0%;
}
#subDiv2
{
float: left;
}
#subDiv3
{
float: left;
}
#subDiv4
{
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
float: left;
}
回答by dezman
I think the problem you are having, is that you need to clear your floats. This might not be the best way to do it, but for simplicities sake, add this:
<div style="clear:both;"></div>after the last <div>inside your container(#navBar).
我认为您遇到的问题是您需要清除浮标。这可能不是最好的方法，但为了简单起见，添加以下内容：
<div style="clear:both;"></div>在<div>容器中的最后一个之后（#navBar）。
