【发布时间】：2020-06-20 20:00:08
【问题描述】：
我有一个名为 timerow 的容器，它和它的父容器一样大。在它里面我定位时间，所以很清楚它上面的方框中的距离意味着什么。问题是，float: left; 完美地与 % 中的边距一起工作，但最后一个元素总是被包裹。我不能让容器变宽，因为那时 % 的边距关闭了。
我还尝试了display: inline-block;，但没有成功（因为空格改变了位置）和我也提供的 flexbox。 Flexbox 非常接近，但是当我将所有内容缩放到小，或添加另一个时间标签（另一个标签）时，它不仅位于最右侧，而且会改变容器的宽度并再次改变定位。
我的预期结果是所有标签都相对于它们的左邻居定位为时间行宽度的一小部分（因为我计算了该 % 值），并且任何溢出都在同一行中可见并将框溢出到对。
我提供了一个最小的jsFiddle。
body {
background-color: #DDD;
}
.block {
display: block;
background: #ccc;
height: 100%;
font-size: .75em;
float: left;
}
.block:nth-child(n+2) {
margin-left: 0.5%;
}
.barchart {
grid-area: all;
display: grid;
grid-template-columns:
[viewport-start] minmax(9px, 1fr)
[container-start] minmax(20em, 35em)
[container-end] minmax(9px, 1fr) [viewport-end];
grid-auto-rows: 30px;
}
row {
padding: 5px;
box-sizing: border-box;
grid-column: container;
grid-row: span 4;
line-height: 120px;
text-align: center;
}
timerow {
grid-column: container;
grid-row: span 1;
line-height: 16px;
margin: 0 5px;
background: rgba(0,0,0,0.2);
display: flex;
justify-content: flex-start;
flex-flow: row nowrap;
}
timerow a {
height: 20px;
width: 40px;
font-size: 15px;
color: #919191;
text-align: center;
background: #fff;
}
timerow a:first-child, timerow2 a:first-child {
margin-left: -21px;
}
timerow2 {
grid-column: container;
grid-row: span 1;
line-height: 16px;
margin: 0 5px;
background: rgba(0,0,0,0.8);
}
timerow2 a {
height: 20px;
width: 40px;
font-size: 15px;
color: #919191;
text-align: center;
background: #fff;
float: left;
}
和html
<div class="barchart">
<row style="animation: none;width:100%;">
<a style="width:28.9444444444%;" class="block"></a>
<a style="width:63.805555555%;" class="block"></a>
<a style="width:6.25%;" class="block"></a>
</row>
<timerow>
<a>00:00</a>
<a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
<a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
</timerow>
<timerow>
<a>00:00</a>
<a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
<a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
<a>24:00</a>
</timerow>
<timerow2>
<a>00:00</a>
<a style="margin-left:calc((28.94444 + 0.25)*1% - 40px);">07:30</a>
<a style="margin-left:calc((63.8055 + 0.5)*1% - 40px);">22:30</a>
<a>24:00</a>
</timerow2>
</div>
【问题讨论】：
标签： css css-float css-position