我的目标是在一个“容器”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我搜索了Google和StackOverFlow,我找不到有用的答案。关于在一个div中放置两个div有很多问题,但没有一个用于在一个div中对齐多个div。
提前感谢您的帮助!
答案 0 :(得分:12)
我做两件事,摆脱浮动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;
}
答案 1 :(得分:1)
您可以使用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;
}
}
答案 2 :(得分:1)
我在你的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;
}
答案 3 :(得分:0)
我认为您遇到的问题是,您需要清除浮标。这可能不是最好的方法,但为了简单起见,添加:
在容器内的最后一个<div style="clear:both;"></div>
之后<div>
。{/ 1}}。