如何将余下的宽度设置为正确的float元素？
问题描述：
我想要做的是将width: {the rest of width}设置为具有float:right属性的元素。这里是我的代码：如何将余下的宽度设置为正确的float元素？
.wrapper{
border: 1px solid;
padding-left: 10px;
}
.fix{
border: 1px solid blue;
width: 80px;
display:inline-block;
}
.rest{
float: right;
border: 1px solid red;
}<div class='wrapper'>
<div class='fix'> fix width </div>
<div class='rest'> it should has both right float and the rest of width</div>
</div>我怎么能填补这一空白？这是预期输出：
答
不知道你是在CSS如何灵活，但如果你在固定的div使用float:left您可以在正确的使用overflow:auto。
.wrapper{
border: 1px solid;
padding-left: 10px;
}
.fix{
border: 1px solid blue;
width: 80px;
display:inline-block;
float: left;
}
.rest{
border: 1px solid red;
overflow: auto;
}<div class='wrapper'>
<div class='fix'> fix width </div>
<div class='rest'> it should has both right float and the rest of width</div>
</div>如果需要浮动权div的实际内容则仍然是正确的，你可以添加一个内容容器右内浮动。
.wrapper{
border: 1px solid;
padding-left: 10px;
}
.fix{
border: 1px solid blue;
width: 80px;
display:inline-block;
float: left;
}
.rest{
border: 1px solid red;
overflow: auto;
}
.right-content{
float:right;
}<div class='wrapper'>
<div class='fix'> fix width </div>
<div class='rest'><div class="right-content"> it should has both right float and the rest of width</div></div>
</div>
答
使用calc减去值。
.rest{
float: right;
border: 1px solid red;
width: calc(100% - 80px);
}
+0
你知道，我网站的大部分用户使用旧浏览器，他们的浏览器不支持'clac（）'。没有任何解决方法吗？ – stack
+0
没有Javascript，下面是当前的兼容性图表：http：//caniuse.com/#feat=calc –
答
在申请％宽度
.fix{
border: 1px solid blue;
width: 20%;
display:inline-block;
float:left;
}
.rest{
float: right;
border: 1px solid red;
width:80%;
}
你可以把'宽度：理论值（100％ - 80px）''上.rest' – Santi
这似乎是一个完美的时间使用'flexbox'（几乎所有的浏览器支持） – Phil