如何将宽度的其余部分设置为右浮动元素？

Question

我尝试做的只是将width: {the rest of width}设置为具有float:right属性的元素。这是我的代码：

＆＃13;

＆＃13;

.wrapper{
  border: 1px solid;
  padding-left: 10px;
}

.fix{
  border: 1px solid blue;
  width: 80px;
  display:inline-block;
}

.rest{
  float: right;
  border: 1px solid red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我怎样填补这个空白？这是预期的输出：

Answer 1

使用calc减去该值。

.rest{
  float: right;
  border: 1px solid red;
  width: calc(100% - 80px);
}

Answer 2

不确定您对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>

Answer 3

在％

中应用宽度

Select OFFER_ACTION_DESC D, OFFER_ACTION_DESC R 
FROM CA_OFFER_ACTION 
WHERE OFFER_NAME = :P6_OFFER_TYPE