Html 三列/四列列表，每个项目下方有弹出式说明

我有一个项目列表，每个项目都有一个（固定大小）缩略图和一些更多数据。该列表现在应以三列/四列/X列布局显示，缩略图按行列出

单击缩略图时，应该会弹出一个（可变高度）窗口，其中包含缩略图下方项目的更多数据，将下一行缩略图向下推。如果选择了同一行中的另一项，说明应“指向它”。如果单击了另一行的项目，则当前打开的说明应折叠，并且新选定项目行下方的新说明应显示

以下是当前版本（只需查看功能，而不是HTML结构）： （如果在下一页选择“设置模板”并选择制造商，则会看到列表的四列变体）

现在我想重做上面的内容，以便HTML结构最终如下所示：

<ul>
  <li>
    <div class="item">
      <div class="item--thumbnail">
        ...
      </div>
      <div class="item--description>
        ...
      </div>
    </div>
  </li>
  <li>
    ...
  </li>
</ul>

...
我已经尝试解决您的问题，您可以在这里看到我的尝试：


我使用了React ES6，但它对您的解决方案并不重要，它所做的只是向每个
li添加一个“选定”类。单击时，项
，一次只能有一个
li
具有选定的类，以便删除任何其他类

注意：为了简洁起见，我删除了内部div，但您可以将其重新添加。除此之外，我还使用了您精确的html结构

它没有响应性，但我相信您可以为此创建一个响应性解决方案，但我没有这样做的原因是因为我使用的是手动偏移，稍后我会解释

我使用了
display:flex
和
flex-wrap:wrap
来创建行

互动

每次
项
获取所选的
类时，它都会使用
边距底部
向下推送所有内容，然后显示内部
。项--description
div，即
位置：绝对
，并从其父项定位为
顶部：100%
和
左侧：0

这就是棘手的部分。因为您的框覆盖了整行，所以我需要偏移
项--description
框，使其相对于其父项。我偏移它的方式是使用
transform:translateX（px）
。唯一能够正确定位“描述”框的元素是左侧的元素。为了纠正这一点，我在
li
上使用了
n子项
，假设为4项布局，然后手动调整每个
transform:translateX（）

如果您想响应性地使用此技术，您可以创建媒体查询来处理3列和2列布局等

我还使用了
：before
伪元素来放置一个相对于父元素位置的三角形，使用
left:50%
top:100%
和
transform:translateX（-50%）
将其居中。
感谢您的解决方案。这是非常鼓舞人心的，我从来没有想过这种方法！我也喜欢你画三角形箭头的方式。不幸的是，我忘了提到description div的高度是可变的，需要根据其内容进行缩放。我也希望固定尺寸少一些。你可以很容易地用%s构建相同的东西。由于容器的高度是可变的，我想不出一个CSS唯一的解决方案。似乎最好的选择是
onClick
测量description div的高度并调整边距以匹配。