我有 3 个 div,它们都具有固定的高度和宽度。 middel 有一条额外的线,但它仍然在父 div 的 250px 之内。然而,它会导致两侧的两个 div 向下移动一点。有人可以解释为什么要这样做,以便我理解 future 的发展吗?
<div id="eventListBox">
<div class="eventListItemBox">
<img src="./icons/bluedude.png" />
<h1>Test Item 1</h1>
<h2>Jan 6th, 2012</h2>
<h2>5/11</h2>
</div>
<div class="eventListItemBox">
<img src="./icons/cookies.png" />
<h1>Very long title to cause wrap on line</h1>
<h2>Jan 15th, 2012</h2>
<h2>2/9</h2>
</div>
<div class="eventListItemBox">
<img src="./icons/cookies.png" />
<h1>Test item 3</h1>
<h2>Jan 15th, 2012</h2>
<h2>2/9</h2>
</div>
</div>
CSS:
#eventListBox{
margin: 0px;
padding: 0px;
position: absolute;
top: 150px;
left: 75px;
right: 75px;
text-align: center;
background-color: rgba(0,0,0,0.25);
}
.eventListItemBox{
display: inline-block;
margin: 0px;
padding: 0px;
width: 250px;
height: 250px;
background-color: rgba(0,0,0,0.25);
}
.eventListItemBox h1{
margin: 0px;
padding: 0px;
font-size: 1.5em;
font-weight: normal;
}
.eventListItemBox h2{
margin: 0px;
padding: 0px;
font-size: 1.2em;
font-weight: normal;
}
最佳答案
由于您的 div 是内联显示的,因此您的框没有均匀对齐,因此需要“告诉”它们如何在行框内垂直对齐,您可以使用 垂直对齐
属性。默认情况下,所有内联元素的 vertical-align
值为 baseline
,这就是为什么左右 div 都粘在底部的原因,因此要解决此问题,您需要告诉他们坚持到顶部,正确对齐所有的 div,您可以通过覆盖默认的 vertical-align
值并将其设置为 top
来实现,例如所以:
CSS
.eventListItemBox {
vertical-align:top;
}
您可以在 this 上找到关于为什么会发生这种情况的更详细解释(带示例)文章。
关于css - 当内容不同时,一行设置大小的 div 不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13907765/