Css 如何强制浮动div填充剩余的水平空间？

对不起，我的问题的标题不太清楚。我在搜索解决方案时试图为它找到一个合适的名称，但找不到确切的方式来描述它

我有一个固定大小的div，它必须向左浮动，就像内联块一样。我在页面的右侧有一个内容区。下面是一个示例，演示了我的意思：。若我尝试更改结果区域div的宽度，那个么将尝试适应块的区域。问题是块的区域和内容区域之间存在间隙。我需要内容区域具有最小宽度，并且我希望该区域水平增长以填补此空白：

例如，块的宽度为100px；最小内容区域应为200px。我需要内容宽度从200px到299px，这取决于块的区域宽度

请问，有没有可能用纯HTML/CSS实现这种行为？我没有避免使用表的限制，所以任何有效的方法都是合适的

---

更新：感谢大家的评论。似乎不可能用纯HTML/CSS实现它。我不确定这一点，因为我还不太擅长CSS。我只是用JavaScript和jQuery实现了这样的行为，它按照我需要的方式工作。

我通常会在block div中放置一个内部容器，这样我就可以在不影响宽度的情况下分配填充：

.block { width: 20%; }
.block > .inner { padding-left: 10px; }
.block:fist-child > .inner { padding: 0; }
<div class="block">
    <div class="inner">
        block
    </div>
</div>

.block{宽度：20%；}
.block>.inner{左填充：10px；}
.block:first child>内部{填充：0；}
块

您可以使用

显示：表格和
表格单元格

您必须为包装器
#main
提供CSS
display:table
及其子元素
表单元格。您必须将
div.right
标记移动到
div.left

 <div class="left">
        <div class="block">Block1</div>
        <div class="block">Block2</div>
        <div class="block">Block3</div>
        <div class="block">Block4</div>
        <div class="block">Block5</div>
        <div class="block">Block6</div>
    </div>
    <div class="right">Content</div>

您可以尝试以下方法：

<div id="main" class="">
<div class="right">Content</div>
<div class="left">
    <div class="clearfix"></div>
    <div class="block">Block1</div>
    <div class="block">Block2</div>
    <div class="block">Block3</div>
    <div class="block">Block4</div>
    <div class="block">Block5</div>
    <div class="block">Block6</div>
</div>

</div>

为了改变div的宽度，我使用JQuery

$(document).ready(function(){

   var left_width = $(".left").width();
   var block_width = $(".block").width()+2;

   var count = Math.floor(left_width/block_width);

   var calc_left_width = count * block_width;
   var calc_right_width = $("#main").width() - calc_left_width;

   $(".left").width(calc_left_width);
   $(".right").width(calc_right_width);

});

我添加了2块的宽度来考虑边框，可以使用OutTythHead（）。你可以看到它在工作
如果你想要5列，给每个列一个宽度，比如说20%。你想根据浏览器的宽度，让左边的div数是动态的、浮动的吗？如果是这样，我想不出怎么做（假设我理解你）。是的，确切地说，我希望div的数量是动态的。根据浏览器的宽度，一行中应该有动态的div数。kalpaitch，我希望有基于浏览器宽度的动态列数。我想你需要使用JavaScriptJquary，谢谢你的评论，但这并不是我真正需要的。我需要有固定大小的积木。我需要内容区域的宽度增长以填充空白，请参见下面的屏幕：您可以修改此代码，使块具有固定大小。包含的div仍将填充剩余的空间。
.right {
  float: right;
  min-width: 200px;
  height: 300px;
  background: #888;
 }

.left {
  overflow: hidden;
  height: 300px;
  background: #ccc;
  width:300px;
  float: left;
 }

.block {

   width: 100px;
   height: 50px;
   float: left;
   border: 1px solid blue;
}
.clearfix{
   clear:both;
}

$(document).ready(function(){

   var left_width = $(".left").width();
   var block_width = $(".block").width()+2;

   var count = Math.floor(left_width/block_width);

   var calc_left_width = count * block_width;
   var calc_right_width = $("#main").width() - calc_left_width;

   $(".left").width(calc_left_width);
   $(".right").width(calc_right_width);

});