如何使Divs与不同的标题长度对齐

Question

我有一个div，它有四个product div，它们彼此水平对齐显示。

每个产品中产品标题的长度（h3）不同-在桌面视图中它们占据1、2或3行。

根据行数，会取消格式化，以使div不再对齐。

我尝试添加一个top: 0px;，以便标头全部从product div的顶部开始，但是较短的h3仍与较长的h3的最后一行对齐。

这是相关的CSS，尽管我认为其中没有任何东西导致h3对齐。

// Product divs

.product {
    display: inline-block;
    padding-right: 1em;
    width: 24vw;
}

.product .details {
    float: left;
    font-family: Helvetica;
}

.product img {
    height: 25vh;
    float: right;
    bottom: 0px;
}

// Details

.details h3 {
    text-transform: uppercase;
    font-size: .8em;
    font-weight: 600;
    top: 0px;
    padding-bottom: 2.5em; // even removing this line doesn't solve it
    width: 15em;
}

理想情况下，h3都将从同一位置开始而不是现在。

我该如何解决？

Answer 1

您可以将h3替换为一个跨度，然后将该跨度包装在自己的div中，如下所示：

list.forEach(((Consumer<Integer>) e -> someAction).andThen(i -> someMoreAction));

将h3的所有样式复制到跨度。 然后，您可以尝试以这种方式设置样式：

<div class="heading-wrapper">
    <span>Rare Blend Oil</span>
</div>

此绝对定位迫使标题始终从左上角开始，并且使用外包装纸，您还可以控制标题的宽度。 用span代替h3可以使您拥有一个inline元素，并且浏览器不会在标题上添加自己的边距（与h3元素一样）。wrapper类现在使您可以更好地控制元素的位置。

如果这不起作用，您还可以共享HTML吗？