Question

我有三个div在彼此旁边，但是当一个或多个div的内容变得太大时，它会在div下面产生额外的空间。这会导致div不垂直对齐。我不知道如何阻止这种情况发生。

HTML：

<div id="recents">
<div id="upload" class="box">
    <img class="cover" onclick="changeHash2(&quot;track=1328030460&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/track_images/uploads/1328030460-Cover.jpg">
    <span>Miss May I<br>
    Monument (Guitar) v1 and xtra te<br>
    Track</span>
    <span class="tmp"><a href="download.php?uri1328030460" target="_blank"><img src="http://ttrcustoms.us/iCons/download.png"></a> <img onclick="changeHash2(&quot;track=1328030460&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/iCons/info.png"> <img onclick="trackpopup(&quot;1328030460&quot;);" src="http://ttrcustoms.us/iCons/rate.png"></span>
</div>
<div id="spacer"></div>
<div id="upload" class="box">
    <img class="cover" onclick="changeHash2(&quot;track=1327679448&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/track_images/uploads/1327679448-Cover.jpg">
    <span>Miss May I<br>
    Monument Coop and xtra te<br>
    Track</span>
    <span class="tmp"><a href="download.php?uri1327679448" target="_blank"><img src="http://ttrcustoms.us/iCons/download.png"></a> <img onclick="changeHash2(&quot;track=1327679448&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/iCons/info.png"> <img onclick="trackpopup(&quot;1327679448&quot;);" src="http://ttrcustoms.us/iCons/rate.png"></span>
</div>
<div id="spacer"></div>
<div id="upload" class="box">
    <img class="cover" onclick="changeHash2(&quot;track=1308426773&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/track_images/uploads/1330860552-EmbraceTheGutter.jpg">
    <span>The Autumn Offering<br>
    Embrace The Gutter and xtra te<br>
    Track</span>
    <span class="tmp"><a href="download.php?uri1308426773" target="_blank"><img src="http://ttrcustoms.us/iCons/download.png"></a> <img onclick="changeHash2(&quot;track=1308426773&amp;prev=user=CupOfTea696&quot;);" src="http://ttrcustoms.us/iCons/info.png"> <img onclick="trackpopup(&quot;1308426773&quot;);" src="http://ttrcustoms.us/iCons/rate.png"></span>
</div>

CSS：

.box{
    margin: auto;
    padding: 0 2em 2em 2em ;
    border: 1px solid #FA0;
    color: #FFF;
    -moz-border-radius: 13px;
    -webkit-border-radius: 13px;
    border-radius: 13px;
    background-color: #222;
    font: 0.9em Calibri, Verdana, sans-serif;
}

a:link, a:visited{
    color: #C6CDE0;
    text-decoration: none;
}
a:hover{
    color: #fff;
    text-decoration: underline;
}
#recents{
    position: relative;
}
#upload{
    position: relative;
    background-color: #404040;
    display: inline-block;
    padding: 7px;
    width: 30%;
    margin: 0px;
    -moz-transition: background-color 0.25s;
    -o-transition: background-color 0.25s;
    -webkit-transition: background-color 0.25s;
    transition: background-color 0.25s;
}
#upload:hover{
    background-color: #303030;
}
#upload span.tmp{
    position: absolute;
    bottom: 7px;
    right: 7px;

}
#upload .cover{
    width: 64px;
    height: 64px;
    float: left;
    margin-right: 3px;
    moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
}
#upload img{
    cursor: pointer;
    -moz-transition: opacity 0.25s;
    -o-transition: opacity 0.25s;
    -webkit-transition: opacity 0.25s;
    transition: opacity 0.25s;
}
#upload img:hover{
    opacity: 0.5;
}
#spacer{
    width: 1%;
    height: 12px;
    display: inline-block;
}

JSFiddle示例：http://jsfiddle.net/QvGdA/

Answer 1

如果你仔细观察，你可以看到每个方框的最后Track个单词在一行中对齐，它们（通常是给定框的最后一行）构成baseline的{{1}} 1}}。添加了“标尺”div的示范：http://jsfiddle.net/QvGdA/2/

将inline-block添加到vertical-align: top;，并且已修复，请参阅http://jsfiddle.net/QvGdA/1/

div下无法解释的空间

1 个答案: