英文:
Reactive evenly sized grouped divs
问题
我有一个包含N个布尔值的数组。我想以以下方式在一行中显示它们，true显示为蓝色，false显示为橙色。
我还想将相同值的每个块分组，以便我可以生成一个工具提示，结果的HTML可能如下所示：
<div class="line">
<div class="group" title="Group 1">
<div class="item blue">
<div class="item blue">
...
</div>
<div class="group" title="Group 2">
...
</div>
...
</div>
将有N个div.items，每个都应具有相同的宽度。我还希望div.line元素可以自动占据其父元素的整个宽度，并且组/项目可以随之自动放大。
我已经通过以下CSS使其在没有div.group的情况下正常工作，但我无法弄清楚如何扩展它以适当地使用组。
.line {
width: 100%;
height: 20px;
display: flex;
}
.item {
width: 100%;
height: 100%;
}
如何使用纯CSS实现这一目标？
英文:
I have an array of N boolean values. I want to display them in a line like below, true being blue and false being orange.
I also want to group each block of like values, so I can generate a tooltip, the resulting html might look something like:
<div class="line">
<div class="group" title="Group 1">
<div class="item blue">
<div class="item blue">
...
</div>
<div class="group" title="Group 2">
...
</div>
...
</div>
There will be N div.items, and each of these should be the same width. I also want the div.line element to reactively occupy the full width of it's parent, and have groups/items enlarge reactively with it.
I have it working without the div.group using the following CSS, however I can't figure out how to extend it to work appropriately with groups.
.line {
width: 100%;
height: 20px;
display: flex;
}
.item {
width: 100%;
height: 100%;
}
How can I accomplish this with pure CSS?
答案1
得分: 1
你可以为 group 类设置 display: contents。这样，group 将会像不存在一样，因此项目将会遵循 line 元素的 flex 属性。
.line {
width: 100%;
height: 20px;
display: flex;
}
.item {
width: 100%;
height: 100%;
}
.group {
display: contents;
}
英文:
You might set display: contents for the group class. This way the group will act like it isn't there, so the items will respect the flex property of the line element.
.line {
width: 100%;
height: 20px;
display: flex;
}
.item {
width: 100%;
height: 100%;
}
.group {
display: contents;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论