如何解决CSS:将孩子的前一半放在左侧网格列中
我有一个包含2列的菜单,我希望前半部分浮动到左列中,而下半部分浮动到右列中。
nav ul {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: repeat(4,auto);
}
nav ul li:nth-child(-n+4) {
grid-column: 1;
}
nav ul li:nth-child(n+5){
grid-column: 2;
}
/*
This would be very annoying if there were
more than just 4 elements that need to be
put somewhere else manually.
nav ul li:nth-child(5){
grid-row: 1;
}
nav ul li:nth-child(6){
grid-row: 2;
}
nav ul li:nth-child(7){
grid-row: 3;
}
nav ul li:nth-child(8){
grid-row: 4;
}*/
<nav>
<ul>
<li><a class="nav-link">One</a></li>
<li><a class="nav-link">Two</a></li>
<li><a class="nav-link">Three</a></li>
<li><a class="nav-link">Four</a></li>
<li><a class="nav-link">Five</a></li>
<li><a class="nav-link">Six</a></li>
<li><a class="nav-link">Seven</a></li>
<li><a class="nav-link">Eight</a></li>
</ul>
</nav>
我想出了以下代码,如果能解决的话,它将解决该问题。显然不是这种情况。
nav ul li:nth-child(n+5){
grid-column: 2;
grid-row: calc(n-5);
}
如何正确执行此操作?感谢您的帮助!
解决方法
在grid-auto-flow: column
中添加nav ul
,然后删除grid-column: 1
和grid-column: 2
规则。
nav ul {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: repeat(4,auto);
grid-auto-flow: column;
}
/*nav ul li:nth-child(-n+4) {
grid-column: 1;
}
nav ul li:nth-child(n+5){
grid-column: 2;
}*/
/*
This would be very annoying if there were
more than just 4 elements that need to be
put somewhere else manually.
nav ul li:nth-child(5){
grid-row: 1;
}
nav ul li:nth-child(6){
grid-row: 2;
}
nav ul li:nth-child(7){
grid-row: 3;
}
nav ul li:nth-child(8){
grid-row: 4;
}*/
<nav>
<ul>
<li><a class="nav-link">One</a></li>
<li><a class="nav-link">Two</a></li>
<li><a class="nav-link">Three</a></li>
<li><a class="nav-link">Four</a></li>
<li><a class="nav-link">Five</a></li>
<li><a class="nav-link">Six</a></li>
<li><a class="nav-link">Seven</a></li>
<li><a class="nav-link">Eight</a></li>
</ul>
</nav>
,
听起来您需要grid-auto-flow: column;
,它将在到达重复的结尾后将下一项放在下一列的顶部。
nav ul {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: repeat(4,auto);
grid-auto-flow: column;
}
<nav>
<ul>
<li><a class="nav-link">One</a></li>
<li><a class="nav-link">Two</a></li>
<li><a class="nav-link">Three</a></li>
<li><a class="nav-link">Four</a></li>
<li><a class="nav-link">Five</a></li>
<li><a class="nav-link">Six</a></li>
<li><a class="nav-link">Seven</a></li>
<li><a class="nav-link">Eight</a></li>
</ul>
</nav>
,
I suggest **flexbox**.
<nav>
<ul>
<li><a class="nav-link">One</a></li>
<li><a class="nav-link">Two</a></li>
....
</ul>
<ul><li><a class="nav-link">five</a></li>
<li><a class="nav-link">six</a></li>
...</ul>
</nav>
nav{
dispaly:flex
justify-contents:space-between;
align-items:center;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。