我在 div#links 中添加的链接越多，它相对于其他 div 就越高。为什么？
<body>
<div id="pageWrapper">
<div id="plan">
<div class="heading">
Plan
</div>
</div>
<div class="links">
<div class="heading">
Links 1
</div>
<a href="#">Link 1</a><br/>
<a href="#">Link 2</a>
</div>
<div class="links">
<div class="heading">
Links 2
</div>
</div>
<div class="links">
<div class="heading">
Links 3
</div>
</div>
<div id="notes">
<div class="heading">
Notes
</div>
</div>
<div class="links">
<div class="heading">
Links 3
</div>
</div>
<div id="gallery">
<div class="heading">
Gallery
</div>
</div>
</div><!--end pageWrapper-->
</body>
</html>
* {
margin: 0px;
padding: 0px;
border: none;
}
body {
background-color: rgb(30,30,30);
}
#pageWrapper {
width: 1200px;
height: 650px;
background-color: rgb(30,30,30);
color: rgb(230,230,230);
margin: 10px auto 0px auto;;
font-family: Tahoma, sans-serif;
font-size: 18px;
padding: 20px 0px;
}
a:link, a:visited {
color: rgb(184,216,5);
text-decoration: none;
}
a:hover, a:active {
color: rgb(184,216,5);
text-decoration: underline;
}
#plan , #notes, #gallery{
border: 3px solid rgb(230,230,230);
border-radius: 10px;
width: 452px;
height: 280px;
display: inline-block;
margin: 0px 5px 10px 5px;
}
.links {
border: 3px solid rgb(230,230,230);
border-radius: 10px;
width: 215px;
height: 280px;
display: inline-block;
margin: 0px 5px 10px 5px;
}
.heading {
width: 150px;
margin: 0px auto 5px auto;
text-align: center;
font-size: 0.8em;
}
.links a {
margin-left: 30px;
}
最佳答案
将vertical-align:top 添加到.links 类。应使所有 div 对齐。
关于html - 为什么每增加一个链接我的 div 就会变高？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28729650/