CSS宽度和溢出

-1

如果我不能控制内部跨度的宽度设置（即它由一些JS设置），并且组合宽度大于100％，我如何强制它将它们全部显示在没有第三个跨度的容器盒的宽度包装并显示在其他两个下面。CSS宽度和溢出

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

来源

2017-08-22 malejunk

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

来源

2017-08-22 06:14:50 Rajez

您可以使用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>

来源

2017-08-22 06:04:44

CSS宽度和溢出

回答

相关问题