Question

如果我无法控制内部跨距的宽度设置（即由某些JS设置）并且组合宽度大于100％，我该如何强制它在容器的宽度范围内显示它们没有第三个跨度包装的盒子，并在另外两个下方显示。

.box {
  height: 10px;
  width: 50%;
  margin: 3px 0;
}

.box span {
  height: 10px;
  float: left;
  display: block;
}

<div class="box">
   <span style="width: 40.0%; background: red;"></span>
   <span style="width: 10.0%; background: green;"></span>
   <span style="width: 50.1%; background: blue;"></span>
</div>

Answer 1

您可以使用flexbox

.box {
  height: 10px;
  width: 50%;
  margin: 3px 0;
  display:flex;
}

.box span {
  height: 10px;
  display: block;
}

<div class="box">
   <span style="width: 40.0%; background: red;"></span>
   <span style="width: 10.0%; background: green;"></span>
   <span style="width: 50.1%; background: blue;"></span>
</div>

Answer 2

将display: flex用于父元素。 flex属性将调整多余宽度以适应100％

CSS宽度和溢出

2 个答案: