html - 保持div中的信息始终以特定行数显示

Question

我有一个问题，关于如何让 div 中的信息始终显示在特定行数内。

如 JSFiddle 中的结构所述，我有3种信息要显示在一个div中。有时他们每个人都会很短，只有一行，但有时他们可能是多行显示的长名称。而对于偶尔出现的“<p class="promotion-content">”。

所以我想要的是 div 中的那些信息将始终显示在 3 行以内。如果“promotion-content”中有信息，则只显示促销内容，即使其信息少于3行，它仍然是3行高。

所以当我不包含任何促销时，只会显示品牌名称和产品名称，并且它们被限制为 3 行高度。但如果两个名字都很短，只有 2 行，我仍然会有一个空的第 3 行。除了自己为每个相关产品添加一个
之外，我可以使用 HTML 和 CSS 来实现吗？

我对执行所有这些操作的方法感到困惑，我尝试过限制高度但似乎不起作用。我想知道它们是否可以通过 HTML 和 CSS 技巧来完成？？有人可以给我一些指导吗？谢谢!!!

Answer 1

你可以给div设置min-height

在 HTML 中

    <div class="information">
      <p class="promotion-content">
      Buy 1 Get 1 Free
      </p>
      <p class="brand-name">
      ABC Brand
      </p>
      <p class="product-name">
      Product Name
      </p>
    </div>

在 CSS 中

    .information {
      min-height:120px;
      border: 1px solid #ddd;
    }

可以引用这个JSFiddle