CSS 向左浮动，不换行且大小固定

Question

我有一个名为 timerow 的容器，它和它的父容器一样大。我在其中放置时间，因此很明显距离在其上方的框中意味着什么。问题是， float: left; 与 % 中的边距完美配合，但最后一个元素总是被换行。我无法让容器变宽，因为那样的话 % 的边距就关闭了。

我也尝试了 display: inline-block; 但没有成功（因为空格改变了定位 agian）和我也提供的 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>

Answer 1

为避免这种情况，向最后一个元素添加一个负边距，这样它的宽度就不会计入总宽度，并且可以保留在第一行（但可以溢出）：

timerow a:last-child, timerow2 a:last-child {
  margin-right: -40px;
}

完整代码：

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;
}
timerow a:last-child, timerow2 a:last-child {
  margin-right: -40px;
}

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;
}

<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>

更好的解决方案是考虑宽度为 0 的元素，这样您的所有计算都会更容易：

body {
  background-color: #DDD;
}

.block {
  background: #ccc;
  height: 100%;
  font-size: .75em;
  float: left;
}

.block:nth-child(n+2) {
  margin-left: 0.5%;
}

.barchart {
  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;
  line-height: 16px;
  margin: 0 5px;
  background: rgba(0,0,0,0.2);
  display: flex;
}

timerow a {
  height: 20px;
  width: 0;
  font-size: 15px;
  text-align: center;
  position:relative;
}
timerow a::before {
  content:attr(data-time);
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  background: #fff;
  color: #919191;
}

<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 data-time="00:00"></a>
  <a style="margin-left:calc((28.94444 + 0.25)*1%);" data-time="07:30"></a>
  <a style="margin-left:calc((63.8055 + 0.5)*1%);" data-time="22:30"></a>
  </timerow>
  
  <timerow>
  <a data-time="00:00"></a>
  <a style="margin-left:calc((28.94444 + 0.25)*1%);" data-time="07:30"></a>
  <a style="margin-left:calc((63.8055 + 0.5)*1%);" data-time="22:30"></a>
  <a style="margin-left:calc((6.25 + 0.5)*1%);" data-time="24:00"></a>
  </timerow>
  
    <timerow style="background:rgba(0,0,0,0.8)">
  <a data-time="00:00"></a>
  <a style="margin-left:calc((28.94444 + 0.25)*1%);" data-time="07:30"></a>
  <a style="margin-left:calc((63.8055 + 0.5)*1%);" data-time="22:30"></a>
  <a style="margin-left:calc((6.25 + 0.5)*1%);" data-time="24:00"></a>
  </timerow>

</div>

CSS 向左浮动，不换行且大小固定

CSS float left, without wrapping and fixed size

css

css-float

css-position