文本按<div>向下</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;
}

BTW：<font class="descriptiontitle">Item 1</font>不应该使用...它的HTML无效

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