在父 Div 中放置多个 Div（并排）答案

【问题标题】：Placing multiple Divs (side by side) within a parent Div在父 Div 中放置多个 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 和 StackOverFlow，但找不到有用的答案。关于在一个 div 中放置两个 div 有很多问题，但没有一个关于在一个 div 中对齐多个 div 的问题。

提前感谢您的帮助！

【问题讨论】：

是的，我的错。刚刚修好了。
你能提供一个 JSFiddle 吗？问题似乎是你所有的浮动子 div 都是 25% 宽度 + 1px 边框。你可以使用box-sizing: border-box来解决它。
已经解决了，谢谢！

标签： css html css-float alignment

【解决方案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）。

【讨论】：