css - 文本将 <div> 向下推

Question

我正在用简单的 html 创建一个小商店。每个可购买的元素都有自己的盒子，稍后我将在其中插入元素的名称和图片。

但是，我的问题是，当我输入需要 2 行或更多行才能容纳的元素名称时，因为所有其他框也会被向下推:

我有大约 500 行代码，所以我将只粘贴我认为与问题相关的代码:

CSS:

.packitem{
    background-image: url("");
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
    border-radius: 10px;
    padding: 4px;
    margin: 12px 3px 0 3px;
    display: inline-block;
}
.packitem a.boxlink{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none; /* No underlines on the link */
    z-index: 10; /* Places the link above everything else in the div */
    background-color: #FFF; /* Fix to make div clickable in IE */
    opacity: 0; /* Fix to make div clickable in IE */
    filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}
.boxtext{
    font-size: 16px;
    font-family: verdana;
    color: #fff;
    vertical-align: top;
}

HTML:

<div class="packages1">
<div><font class="packfont">Packages</font></div>
    <div class="packitem">
        <a href="javascript:void(0)" class="boxlink" onclick = "document.getElementById('pack1').style.display='block';document.getElementById('fade').style.display='block'"></a>
        <div id="pack1" class="white_content">
            <font class="descriptiontitle">Item 1</font>
            <p class="descriptiontext">Dummy text</p>
            <a href="javascript:void(0)" onclick="document.getElementById('pack1').style.display='none';document.getElementById('fade').style.display='none'">
                <p class="closelink">Close</p>
            </a>
        </div>
        <font class="boxtext">Item 1</font>
    </div>

我设法通过使用 display: inline-flex 而不是 display: inline-block 来解决这个问题，但是那搞砸了文本对齐。

有什么问题吗？

谢谢。

Answer 1

你很接近但是vertical-align: top;应应用于要对齐的元素。

在你的情况下，这应该是盒子

.packitem{
    background-image: url("http://www.dedicatedrejects.com/pics/blockblue.jpg");
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid;
    border-radius: 10px;
    padding: 4px;
    margin: 12px 3px 0 3px;
    display: inline-block;
    vertical-align: top;
}

顺便说一句:<font class="descriptiontitle">Item 1</font>不应该使用...它是无效的 HTML

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font