css - 如何对齐不同标题长度的 div

Question

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

产品标题 (h3) 的长度因产品而异 - 它们在桌面 View 中占据 1、2 或 3 行。

根据行数，格式会被取消，因此 div 不再对齐。

我尝试添加一个 top: 0px; 以便所有 header 都从 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 中，如下所示:

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

将 h3 的所有样式复制到 span。 然后你可以尝试这样设计它:

.heading-wrapper {
    position: relative;
}
.heading-wrapper span {
    position: absolute;
    top: 0;
    left: 0;
}

这种绝对定位强制标题始终从左上角开始，并且通过外包装，您还可以控制标题的宽度。 用 span 替换 h3 允许您拥有一个内联元素，并且浏览器不会将自己的边距添加到标题(就像它对 h3 元素所做的那样)。包装类现在可以让您更好地控制元素的定位。

如果这不起作用，您是否也可以共享 HTML？