我正在尝试动态添加子 div，这会自动调整其父 div 的大小，但我的 CSS 无法正确呈现它们。代码如下
HTML
<head>
<title>Dealer Services Hub</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
</div>
<div id="body">
<div id = "maindiv">
<div class = 'maindivs'>Sales/Credit</div>
<div class = 'maindivs'>Finance</div>
<div class = 'maindivs'>Compliance/Audit</div>
<div class = 'maindivs'>Admin</div>
<div class = 'maindivs'>Reporting</div>
<div class = 'maindivs'>EOT</div>
<div class = 'maindivs'>Test</div>
</div>
<div id = "sidebardiv">
<div class = 'sidebardivs' div id = 'recentsdiv'><div id = 'recentlinkstitle'>Frequent Views</div></div>
<div class = 'sidebardivs' div id ='dealercommentsdiv'>Dealer Comments</div>
<div class = 'sidebardivs'>Dealers</div>
</div>
</div>
<!--Footer Div-->
<div id="footer">
<div>
<span>USBNet</span>
</div>
<div>
<span>Best In Us</span>
</div>
<div>
<span>Directory</span>
</div>
</div>
</div>
</body>
CSS
body{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#body{
width: 100%;
height: 100%;
float: left;
color:#0C2074;
}
h2{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#wrapper {
width:1400px;
margin: 0;
padding: 0;
height: 100%;
overflow:auto;
}
#header{
width: 1320px;
height: 100px;
float: left;
background: #0C2074;
margin: 0 auto;
}
#maindiv{
width:1000px;
height:100%;
float: left;
color:#0C2074;
overflow:hidden;
}
.maindivs{
width:300px;
height: 220px;
background: #67B2E8;
box-shadow: 10px 10px 8px #888888;
text-align: center;
float: left;
margin-top: 20px;
margin-left: 20px;
cursor:pointer;
border-radius: 10px;
color:#0C2074;
}
#sidebardiv{
width:300px;
height:100%;
float: left;
border-left: 1px solid #5a5a5a;
overflow:hidden;
}
.sidebardivs{
width:90%;
height: 220px;
border: 1px solid #000000;
background: #e5e5e5;
color:#0C2074;
margin-top: 20px;
margin-left: 20px;
border-radius: 10px;
}
#recentsdiv{
font-size: 95%;
}
#dealercommentsdiv{
text-align: center;
float: left;
margin-bottom: 20px;
cursor:pointer;
}
#footer{
width: 1320px;
height:40px;
float: left;
background: #0C2074;
clear: both;
color:#FFF;
}
#footer div{
width:33.33%;
height: 100%;
text-align: center;
float: left;
margin: auto;
padding-top: 5px;
padding-right: 5px;;
padding-bottom: 5px;
padding-left: 5px;
border-left: 1px solid #67B2E8;
border-right: 1px solid #67B2E8;
font-size: 120%;
box-sizing: border-box;
}
附加的 div 是父级 'maindiv' 的 'Test' 和父级 'sidediv' 的 'Dealers' 结果是 'Test' div 似乎在其底部和 'Dealers' 之间的空间被切断div 是多余的
最佳答案
现在好点了吗？:
body{
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
#body{
width: 100%;
height: 100%;
float: left;
color:#0C2074;
}
#wrapper {
width:100%;
margin: 0;
padding: 0;
height: 100%;
overflow:auto;
}
#header{
width: 100%;
height: 100px;
float: left;
background: #0C2074;
margin: 0 auto;
}
#maindiv{
width:80%;
height:100%;
float: left;
color:#0C2074;
overflow:hidden;
padding-bottom: 35px;
}
.maindivs{
width:30%;
height: 210px;
background: #67B2E8;
box-shadow: 7px 7px 8px #666;
text-align: center;
float: left;
padding-top: 10px;
margin-top: 30px;
margin-left: 2.5%;
cursor:pointer;
border-radius: 7px;
color:#0C2074;
}
#sidebardiv{
width:19%;
height:100%;
float: left;
border-left: 1px solid #5a5a5a;
overflow:hidden;
}
.sidebardivs{
width:80%;
height: 210px;
padding-top: 10px;
border: 1px solid #000000;
background: #e5e5e5;
color:#0C2074;
margin-top: 30px;
margin-left: 20px;
border-radius: 7px;
text-align:center;
}
#recentsdiv{
font-size: 95%;
}
#dealercommentsdiv{
text-align: center;
float: left;
margin-bottom: 20px;
cursor:pointer;
}
#footer{
width: 100%;
height:40px;
background: #0C2074;
clear: both;
color:#FFF;
text-align:center;
}
#footer div{
width:30%;
height: 32px;
display: inline-block;
margin: auto;
padding-top:8px;
padding-right: 1%;
padding-left: 1%;
border-left: 1px solid #67B2E8;
border-right: 1px solid #67B2E8;
font-size: 22px;
}<head>
<title>Dealer Services Hub</title>
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
</div>
<div id="body">
<div id="maindiv">
<div class = 'maindivs'>Sales/Credit</div>
<div class = 'maindivs'>Finance</div>
<div class = 'maindivs'>Compliance/Audit</div>
<div class = 'maindivs'>Admin</div>
<div class = 'maindivs'>Reporting</div>
<div class = 'maindivs'>EOT</div>
<div class = 'maindivs'>Test</div>
</div>
<div id = "sidebardiv">
<div class ='sidebardivs' id = 'recentsdiv'><div id = 'recentlinkstitle'>Frequent Views</div></div>
<div class ='sidebardivs' id ='dealercommentsdiv'>Dealer Comments</div>
<div class = 'sidebardivs'>Dealers</div>
</div>
</div>
<!--Footer Div-->
<div id="footer">
<div>
<span>USBNet</span>
</div>
<div>
<span>Best In Us</span>
</div>
<div>
<span>Directory</span>
</div>
</div>
</div>
</body>关于html - 动态添加 DIVS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41176564/