英文:
Grid with irregular item sizes and pinned elements
问题
我需要制作一个标签云。它应该看起来像下面的图片所示：
这里的红色框是“显示更多”按钮，应始终固定在右上角。标签的数量（这里的标签是蓝色框）是未知的，行数也是未知的。
我尝试使用网格来实现，但似乎无法创建非矩形的单元格。我尝试通过形状属性来创建蓝色框的包装器，但似乎也不是一个选项。
英文:
I have to make a tag cloud. It should be looking like it shown in the picture below:
The red box here is the "show more" button which should be always sticked to the top right corner. Amount of tags (the tags are blue boxes here) is unknown, so as amount of rows.
I tried to do it with grid, but it seems it's impossible to make a non-rectangular cell. I tried to make the wrapper for blue boxes by the shape attribute, but it seems it's not an option as well.
答案1
得分: 1
不要使用grid，因为你实际上不需要一个网格。而是尝试使用flex和row-reverse - 如果你不关心标签的顺序（因为它们将按水平相反的顺序排序），这将起作用。
ul {
list-style:none;
}
li {
display: inline-block;
padding: 3px 10px;
}
.show-more,
.tag {
flex-basis: auto;
flex-grow: 1;
margin: 0 10px 10px;
text-align: center;
}
.show-more {
background-color: tomato;
color: white;
}
.tag {
background-color: beige;
color: black;
}
.tag:nth-child(2) { width: 100px; }
.tag:nth-child(4) { width: 120px; }
.tag:nth-child(6) { width: 75px; }
.container {
max-width: 400px;
}
.tag-list {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
}
<div class="container">
<ul class="tag-list">
<li class="show-more">显示更多</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
</ul>
</div>
英文:
Don't use grid for that because you don't really want a grid. Instead try flex with row-reverse - it will work if you don't care about the order of the tags (because they will be sorted in reversed horizontal order).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
ul {
list-style:none;
}
li {
display: inline-block;
padding: 3px 10px;
}
.show-more,
.tag {
flex-basis: auto;
flex-grow: 1;
margin: 0 10px 10px;
text-align: center;
}
.show-more {
background-color: tomato;
color: white;
}
.tag {
background-color: beige;
color: black;
}
.tag:nth-child(2) { width: 100px; }
.tag:nth-child(4) { width: 120px; }
.tag:nth-child(6) { width: 75px; }
.container {
max-width: 400px;
}
.tag-list {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
}
<!-- language: lang-html -->
<div class="container">
<ul class="tag-list">
<li class="show-more">Show more</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
<li class="tag">...</li>
</ul>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论