首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS网格空间-当内容达到一定限制时,间隔不能按预期工作

CSS网格空间-当内容达到一定限制时,间隔不能按预期工作
EN

Stack Overflow用户
提问于 2018-08-08 17:43:46
回答 1查看 100关注 0票数 2

我想创建一个带有标签的部分,它在小屏幕上变成一个“折叠”,所以不是先定义标签栏,然后定义每个标签的内容,我把标签的链接和标签的内容放在链接之后,然后使用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>

问题是,当文章的内容增长时会发生什么。链接被拉伸以填满整行,-不再起作用(即,它们之间没有更多的空格):

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>

唯一的区别是活动文章(选项卡)中的文本(内容)数量不同。

有人能帮我一下吗?

EN

回答 1

Stack Overflow用户

发布于 2018-08-08 19:26:18

如果你被允许使用grid-template-area,你可以尝试一下:

.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>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51743502

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档