在父 Div 中放置多个 Div（并排）
Posted
技术标签:
【中文标题】在父 Div 中放置多个 Div（并排）【英文标题】：Placing multiple Divs (side by side) within a parent Div 【发布时间】：2013-03-11 19:08:40 【问题描述】：我的目标是在一个“容器”div 中放置四个 div。到目前为止，这是我的代码：
HTML
<body>
<div id="navBar">
<div id="subDiv1">
</div>
<div id="subDiv2">
</div>
<div id="subDiv3">
</div>
<div id="subDiv4">
</div>
</div>
</body>
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%;
据我所知，这是我的代码中唯一与我的问题相关的部分，所以我遗漏了一些其他部分。不要介意导航栏的宽度和边距，因为它实际上也在另一个容器中.
P.S 我搜索了 Google 和 ***，但找不到有用的答案。关于在一个 div 中放置两个 div 有很多问题，但没有一个关于在一个 div 中对齐多个 div 的问题。
提前感谢您的帮助！
【问题讨论】：
是的，我的错。刚刚修好了。 你能提供一个 JSFiddle 吗？问题似乎是你所有的浮动子 div 都是 25% 宽度 + 1px 边框。你可以使用box-sizing: border-box来解决它。
已经解决了，谢谢！
【参考方案1】：
我会做两件事，去掉浮动 div 上的边距并添加 box-sizing 规则。
jsFiddle example
#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;
【讨论】：
【参考方案2】：你可以使用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;
fiddle
【讨论】：
【参考方案3】：我在您的 css 中看到的主要问题是您为每个浮动项目添加了边距。如果它是绝对定位的，这将是有意义的。因为它不是 div 会堆叠。删除边距将使 div 适合容器：
http://jsfiddle.net/eGLTM/
#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;
【讨论】：
【参考方案4】：我认为您遇到的问题是您需要清除浮动。这可能不是最好的方法，但为了简单起见，添加以下内容：
<div style="clear:both;"></div> 在容器内最后一个 <div> 之后（#navBar）。
【讨论】：
以上是关于在父 Div 中放置多个 Div（并排）的主要内容，如果未能解决你的问题，请参考以下文章