将内容拉伸至容器宽度的100％，减去浮动的同级元素的宽度

Question

我想在容器内的某些内容旁边放置一个动态徽标（宽度变量/未知）（请参阅随附的样机 - 徽标位于绿色的右侧，内容为蓝色）。我特别希望内容div延伸到页面的完整剩余宽度，如模型中所示：

但是当我尝试将内容浮动到左侧并将徽标浮动到右侧（jsfiddle）时，徽标会定位在内容下方，除非我将内容宽度设置为小于100％（我可以＆ ＃39;知道内容宽度，因为徽标宽度可能会有所不同。）

HTML：

<div id="container">
  <div id="content"></div>
  <div id="logo"></div>
</div>

CSS：

#content {
  border: 1px solid green;
  height: 300px;
  width: 100%;
  float: left;
}

#logo {
  border: 1px solid red;
  width: 50px; /*unknown width*/
  height: 50px;
  float: right;
}

如何将内容div拉伸到整个容器宽度减去徽标的宽度？

Answer 1

根据您的支持要求，flexbox可以执行此操作

＆＃13;

＆＃13;

.container {
  display: flex;
  margin-bottom: 1em;
}
.content {
  background: green;
  height: 100px;
  flex: 1;
}
.logo {
  background: red;
  width: 50px;
  height: 50px;
}
.large {
  width: 100px;
}

＆＃13;

<div class="container">
  <div class="content"></div>
  <div class="logo "></div>
</div>

<div class="container">
  <div class="content"></div>
  <div class="logo large"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是一种使用 jQuery 的可能方法：

jsFiddle demo

jQuery的：

$(document).ready(function() {

    var logoWidth = $('#logo').width();
    var docWidth = $(document).width();
    $('#content').width(docWidth-logoWidth);

});

CSS：

html, body {
    margin:0;
    padding:0;
}
#content {
  background-color: lightblue;
  height: 200px;
  width: 100%;
  float: left;
}
#logo {
  background-color: green;
  width: 50px; /*unknown width*/
  height: 50px;
  float: right;
}

HTML：

<div id="container">
    <div id="content"></div>
    <div id="logo"></div>
</div>

<强> Source

编辑：根据您提供的CSS，我向margin:0;添加了padding:0和html,body，以确保document宽度代表实际两个DIV的可用空间。 在body或html或您使用的容器确实有margin，padding或border的情况下，您可以使用此代码而不是之前的代码：

jsFiddle demo

jQuery的：

$(document).ready(function () {

    var logoWidth = $('#logo').width(),
      docWidth = $(document).width(),
      marginB = $('body').outerWidth(true) - $('body').outerWidth(),
      paddingB = $('body').innerWidth() - $('body').width(),
      borderB = $('body').outerWidth() - $('body').innerWidth();

    $('#content').width(docWidth - logoWidth - marginB - paddingB - borderB);

});

<强> Source