我有一个没有固定宽度的div块。
其中,我有一个包含11个项目的
- ...
##item## ##item## ##item##
##item## ##item## ##item##
##item## ##item## ##item##
##item## ##item##
然而,我完全无法将它排序。
我尝试了左浮动和右浮动,但是中心的三个元素无法居中。
我该怎么做才能让它正常工作呢?
谢谢!
我有一个没有固定宽度的div块。
其中,我有一个包含11个项目的
##item## ##item## ##item##
##item## ##item## ##item##
##item## ##item## ##item##
##item## ##item##
然而,我完全无法将它排序。
我尝试了左浮动和右浮动,但是中心的三个元素无法居中。
我该怎么做才能让它正常工作呢?
谢谢!
Jordan 发布的"行内块"链接是一个很好的资源,特别是对于旧浏览器的支持。为了方便其他通过谷歌搜索而来到这个页面的人们快速参考,创建一个居中的行内块网格的基本CSS样式如下:
ul {
margin: 0 auto;
text-align: center;
}
li {
display: inline-block;
vertical-align: top;
}
ul {
columns: 3;
}
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
<li>g</li>
<li>h</li>
<li>i</li>
<li>j</li>
<li>k</li>
</ul>
这将尽最大努力使列相等。但是,如果没有足够的元素完全相等,它将从右侧开始删除元素,而不是中心。
ul {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"col1-item1 col2-item1 col3-item1"
"col1-item2 col2-item2 col3-item2"
"col1-item3 col2-item3 col3-item3"
"col1-item4 col2-item3 col3-item4";
}
/* Assign a class to each li */
/* Column 1 */
.col1-item1 { grid-area: col1-item1; }
.col1-item2 { grid-area: col1-item2; }
.col1-item3 { grid-area: col1-item3; }
.col1-item4 { grid-area: col1-item4; }
/* Column 2 */
.col2-item1 { grid-area: col2-item1; }
.col2-item2 { grid-area: col2-item2; }
.col2-item3 { grid-area: col2-item3; }
/* Column 3 */
.col3-item1 { grid-area: col3-item1; }
.col3-item2 { grid-area: col3-item2; }
.col3-item3 { grid-area: col3-item3; }
.col3-item4 { grid-area: col3-item4; }
<ul>
<!-- Column 1 -->
<li class="col1-item1">col1 item 1</li>
<li class="col1-item2">col1 item 2</li>
<li class="col1-item3">col1 item 3</li>
<li class="col1-item4">col1 item 4</li>
<!-- Column 2 -->
<li class="col2-item1">col2 item 1</li>
<li class="col2-item2">col2 item 2</li>
<li class="col2-item3">col2 item 3</li>
<!-- Column 3 -->
<li class="col3-item1">col3 item 1</li>
<li class="col3-item2">col3 item 2</li>
<li class="col3-item3">col3 item 3</li>
<li class="col3-item4">col3 item 4</li>
</ul>
这里是示例代码:https://jsfiddle.net/omarjuvera/p3wajehs/2/
你也可以在这里运行代码
ul {
display: grid;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"col1-item1 col2-item1 col3-item1"
"col1-item2 col2-item2 col3-item2"
"col1-item3 col2-item3 col3-item3"
"col1-item4 col2-item3 col3-item4";
}
/* Assign a class to each li */
/* Column 1 */
.col1-item1 { grid-area: col1-item1; }
.col1-item2 { grid-area: col1-item2; }
.col1-item3 { grid-area: col1-item3; }
.col1-item4 { grid-area: col1-item4; }
/* Column 2 */
.col2-item1 { grid-area: col2-item1; }
.col2-item2 { grid-area: col2-item2; }
.col2-item3 { grid-area: col2-item3; }
/* Column 3 */
.col3-item1 { grid-area: col3-item1; }
.col3-item2 { grid-area: col3-item2; }
.col3-item3 { grid-area: col3-item3; }
.col3-item4 { grid-area: col3-item4; }
<ul>
<!-- Column 1 -->
<li class="col1-item1">col1 item 1</li>
<li class="col1-item2">col1 item 2</li>
<li class="col1-item3">col1 item 3</li>
<li class="col1-item4">col1 item 4</li>
<!-- Column 2 -->
<li class="col2-item1">col2 item 1</li>
<li class="col2-item2">col2 item 2</li>
<li class="col2-item3">col2 item 3</li>
<!-- Column 3 -->
<li class="col3-item1">col3 item 1</li>
<li class="col3-item2">col3 item 2</li>
<li class="col3-item3">col3 item 3</li>
<li class="col3-item4">col3 item 4</li>
</ul>