如何获取等高列表项的网格？

发布于 2025-01-05 08:36:36 字数 715 浏览 0 评论 0原文

我正在尝试使用列表项和 inline-block 制作产品网格。问题在于块的内容具有不同的高度，并且 inline-block 不能保持高度相等。

代码：

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

这是一张说明问题的图片。

我需要这些块保持与较大块相同的高度，而与其内容无关。是否可以制作这样的东西：

this ？

原文

I am trying to do a grid of products using list items and inline-block.
The problem is that the content of the blocks has various heights and the inline-block doesn't keep the heights equal.

The code:

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

Here's an image to illustrate the issue.

I need the blocks to keep the same height as the larger blocks, independently of their content. Is it possible to make something like this:

this ?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

明明#如月 2025-01-12 08:36:36

1. 将以下内容添加到 li CSS 将模仿您提供的图像示例。

    height: 150px;
    min-height: 150px;
    overflow:auto;

2.此外，还有一些其他方法：

1. Adding the following to the li CSS will mimic the image example you provided.

    height: 150px;
    min-height: 150px;
    overflow:auto;

2. Also, here are some other approaches:

回复收藏 0 原文

柏林苍穹下 2025-01-12 08:36:36

有一个名为“flexbox”的 W3C 候选布局可以解决这个问题和许多其他问题。要实现等高框，您只需将属性 display: flex 分配给 UL，并将 display: block 分配给其中的 LI。

示例 (CodePen)

如果您需要支持较旧的浏览器，它不会让您走得太远:)但是如果您可以解决此方法很简单而且超级酷。

参考：Flexbox 完整指南

回复收藏 0 原文

方觉久 2025-01-12 08:36:36

我认为除了 javascript 之外没有办法做到这一点；我的建议是设置一个定义的高度，也许还可以设置一个 overflow:auto ，这样在内容溢出的情况下，它不会削弱您的网站，并且您的读者仍然可以看到您的内容。

回复收藏 0 原文

鹿童谣 2025-01-12 08:36:36

首先，如果您将边距调整为全部 4 个边，那么新行的流程中的空间会更好一些。

其次，您可以指定一个更接近所有区域通用值的最小高度，或者运行 JavaScript 以在给定特定宽度的行上将它们设置为相同的高度。

回复收藏 0 原文

沉默的熊 2025-01-12 08:36:36

当您有更多的 div 并因此有更多的行，而没有 row-div（标记行的容器 div）时，CSS Tricks 中的以下示例可以满足您的需求：

行中的等高块

以下代码有八个列表项。当每个角色仅显示三个或四个项目时，给定的示例将使所有 div 每行的高度相等。

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

When you have more divs and thus more rows, without row-divs (container divs that mark a row), then the following example from CSS Tricks does what you need:

Equal Height Blocks in Rows

The following code has eight list items. When only three or four items are displayed per role, then the given example will make all divs equal in height per row.

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

回复收藏 0 原文

~没有更多了~