时间戳

首页 > 解决方案 > 当内容达到一定限制时，CSS Grid space-between 无法按预期工作

html - 当内容达到一定限制时，CSS Grid space-between 无法按预期工作

问题描述

我想创建一个带有在小屏幕中成为“手风琴”的选项卡的部分，因此不是先定义选项卡栏，然后再定义每个选项卡的内容，而是将链接放置到选项卡和该选项卡的内容之后链接，然后使用 CSS Grid 我将活动选项卡定位在选项卡栏中的所有链接之后，以使第一行中的链接和第二行中的活动选项卡。

你可以看到在这里工作：

https://codepen.io/rbournissent/pen/PByXxM

div {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-row-gap: 80px;
  grid-template-rows: 40px 1fr;
  justify-content: space-between;
}

a {
  border: 1px solid black;
}

article {
  display: none;
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  border: 1px solid black;
}

article.active {
  display: block;
}
<div>
  <a href="#">Link 1</a>
  <article class="active">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>

  <a href="#">Link 2</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
  </article>

  <a href="#">Link 3</a>
  <article>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
  </article>

  <a href="#">Link 4</a>
  <article>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
  </article>
</div>

问题是当文章的内容增长时会发生什么。链接被拉伸以填充整行，并且 space-between 不再起作用（即它们之间没有更多空间）：

https://codepen.io/rbournissent/pen/qyJLwy

<div>
    <a href="#">Link 1</a>
    <article class="active">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus ab beatae sed maxime. Amet quam, error atque alias velit dicta officia et optio. Quidem tempora officiis minus laudantium! Beatae, eveniet!
    </article>
  
    <a href="#">Link 2</a>
    <article>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam tempore ipsum ipsa assumenda id rerum a voluptate ipsam nemo, repellat, quisquam nulla, ullam minima cumque obcaecati molestias veritatis cum iusto!
    </article>
  
    <a href="#">Link 3</a>
    <article>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Illum nesciunt facilis temporibus quaerat maiores aut, voluptates recusandae voluptatem corporis adipisci quia, nisi mollitia! Cum delectus earum sapiente distinctio tenetur iusto?
    </article>
  
    <a href="#">Link 4</a>
    <article>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit culpa optio accusamus soluta nemo, porro repellendus! Quisquam corrupti, hic praesentium ipsa, voluptate, non laudantium quae sit eum dolorum illo sed.
    </article>
</div>

唯一的区别是活动文章（选项卡）中的文本（内容）数量。

有人可以帮我吗？

标签： htmlcsscss-grid

解决方案

如果你被允许使用 grid-template-areas，你可以试试这个：

.accordion {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-rows: 30% 70%;
  grid-template-areas:
    "l1 l2 l3 l4"
    "a a a a";
}

a {
  margin: 20px;
  border: 1px solid red;
  text-align: center;
}

a:nth-of-type(1) {
  grid-area: l1;
}

a:nth-of-type(2) {
  grid-area: l2;
}

a:nth-of-type(3) {
  grid-area: l3;
}

a:nth-of-type(4) {
  grid-area: l4;
}

article {
  display: none;
}

article.active {
  text-align: justify;
  padding: 0 20px 0 20px;
  display: block;
  grid-area: a;
}
<div class="accordion">
  
  <a href="#">Link 1</a>
  <article class="active">
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat. Lorem ipsum, dolor sit amet     consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
  <a href="#">Link 2</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
  <a href="#">Link 3</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
  <a href="#">Link 4</a>
  <article>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempore vero, eius quae placeat.
  </article>
  
</div>

推荐阅读