Question

我正在尝试创建以下网格布局，以显示单击时的子项。

所以

[link1] [link2] [link3]

[link4] [link4] [link4]

会成为

[link1] [ link2 ] [link3]

[--------- link2 内容---------]

[link4] [link4] [link4]

即，单击link2会在其下方的网格中显示与link2相关的内容。

我曾试图通过将链接和内容组合到一个dl中来进行语义上的操作。

<div style="display: flex">

    <dl>
        <dt><a href="#accordion1">Link1</a></dt>
        <dd>Content 1</dd>
    </dl>

    <dl>
        <dt><a href="#accordion2">Link2</a></dt>
        <dd>Content 2</dd>
    </dl>

    <dl>
        <dt><a href="#accordion3">Link3</a></dt>
        <dd>Content 3</dd>
    </dl>

    ..etc

</div>

在这种布局下，我是正确的，因为相邻的块，我无法制作相应的的全宽

如果是这种情况，我是否需要将布局分解为一系列div（以降低其语义性为代价）？

任何帮助表示赞赏。

在此先感谢

Answer 1

CSS Grid可以执行此操作，但只能更改HTML。

这是我使用悬停功能的一种，但可以非常轻松地适应点击。

从本质上讲，“描述”一直被隐藏，直到需要为止，并且由于自动流中的dense值，被迫移至下一行和其他元素的情况也发生了改变。

.container {
  width: 80%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  grid-gap: 1em;
}

.item,
.desc {
  border: 1px solid grey;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}

.item {
  background: lightblue;
  transition: background 0.25s ease;
}

.item:hover {
  background: rebeccapurple;
}

.item:hover+.desc {
  display: block;
}

.desc {
  background: palegoldenrod;
  display: none;
  grid-column: 1 / -1;
}

@media (min-width: 700px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }
}

<div class="container">
  <div class="item">1</div>
  <div class="desc">Description 1</div>
  <div class="item">2</div>
  <div class="desc">Description 2</div>
  <div class="item">3</div>
  <div class="desc">Description 3</div>
  <div class="item">4</div>
  <div class="desc">Description 4</div>
  <div class="item">5</div>
  <div class="desc">Description 5</div>
  <div class="item">6</div>
  <div class="desc">Description 6</div>

</div>

有没有一种方法可以使用CSS

1 个答案: