将多个Div（并排）放在父代Div中

我的目标是在一个“容器”div中放置四个div。这里是我到目前为止的代码：将多个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%; 
}

据我知道这是我的代码的唯一部分是有关我的问题，所以我留下一些其他部分..不要介意navBar的宽度和边距，因为它实际上也在另一个容器中。

P.S我搜查谷歌和StackOverFlow，我找不到有用的答案。关于在一个div中放置两个div有很多问题，但是没有一个用于在一个div内对齐多个div。

感谢您提前提供任何帮助！

来源

2013-03-22 corecase

呀我的坏。只是修复它。 – corecase 2013-03-22 02:26:47

你能提供一个JSFiddle吗？问题似乎是，所有浮动的子div都是25％宽度+ 1px边框。你可以使用'box-sizing：border-box'来解决它。 – powerbuoy 2013-03-22 02:44:39

这是固定的男人，谢谢！ – corecase 2013-03-22 02:45:45

我会做两件事，摆脱浮动div的边距，并添加箱子尺寸规则。

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

来源

2013-03-22 02:34:10 j08691

没关系，最后的评论！谢谢，这工作正常！ – corecase 2013-03-22 02:41:19

您可以使用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

来源

2013-03-22 02:29:42

为什么要教他使用表格？ – dezman 2013-03-22 02:30:14

不是表格，而是显示表格。感觉差异 – 2013-03-22 02:30:31

好的，好吧，我想它是很好的意识到你的选择。 – dezman 2013-03-22 02:31:23

我想你所遇到的问题，就是你需要清除浮动。这可能不是最好的方法，但为了简单起见，在您的容器（#navBar）中最后一个<div>之后加上： <div style="clear:both;"></div>。

来源

2013-03-22 02:29:52 dezman

，我跟你的CSS看到的主要问题是，你在每个浮点项目保证金增加。如果它被绝对定位，这将是有意义的。既然不是divs会堆栈。卸下利润率将允许的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; 
}

来源

2013-03-22 02:35:01 munch1324

将多个Div（并排）放在父代Div中

回答

相关问题