Question

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

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

以下是当前版本（只看一下功能，而不是HTML结构）：https://my.tado.com/webapp/#/compatibility-check/setup-selection/templates?installationProcessType=INSTALL_ST_G1 （如果您选择“设置模板”并在下一页上选择制造商，则会看到列表的四列变体。）

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

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

但布局应该看起来和行为相同。怎么可以这样做？也许使用 Flexbox 及其来源（重新）订购？

目标是不将项目分组放入HTML中的行中，并使项目描述“接近”缩略图。

奖励积分，如果解决方案具有响应性，以便在小屏幕上更少的列。

Answer 1

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

http://codepen.io/jefflau/pen/dYzZXj?editors=011

我已经使用过React ES6，但它对您的解决方案并不重要，它所做的就是添加一个“选择”的解决方案。单击时每个li.item的类，并且一次只有一个li可以包含所选的类，以便删除其他任何类。

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

它没有响应，但我确定你可以为此创建一个响应式解决方案，但我之所以没有这个原因是因为我使用了手动偏移，我稍后会解释。

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

互动

每当item获得selected课程时，它会使用margin-bottom推送所有内容，然后显示内部.item--description div，即position: absolute和位于其父级top: 100%和left: 0。

这里是棘手部分的用武之地。由于你的盒子覆盖整行，我需要偏移item--description框，使其相对于其父级。我抵消它的方式是使用transform: translateX(px)。唯一能够正确定位＆＃39;描述＆＃39; box是左侧的元素。为了解决这个问题，我在nth-child上使用了li，假设有4个项目布局，然后手动调整每个transform: translateX()

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

我还使用:before伪元素，使用left: 50% top: 100%和transform: translateX(-50%)将父级的位置相对于父级的位置放置一个三角形。

三/四列列表，每个项目下方都有弹出描述

1 个答案: