我想创建一个带有标签的部分,它在小屏幕上变成一个“折叠”,所以不是先定义标签栏,然后定义每个标签的内容,我把标签的链接和标签的内容放在链接之后,然后使用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>
唯一的区别是活动文章(选项卡)中的文本(内容)数量不同。
有人能帮我一下吗?
发布于 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>
https://stackoverflow.com/questions/51743502
复制相似问题