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

Question

对不起我的问题不是很明确的标题。 在我搜索解决方案时，我试图找到一个合适的名称，但我找不到描述它的确切方法。

我有一个固定大小的div，必须向左浮动，行为像内联块。 我在页面右侧有一个内容区域。 这是一个展示我的意思的例子： http ： //jsfiddle.net/7sp5M/ 。 如果我尝试更改结果区域的宽度div将尝试适合块的区域。 问题是块的面积和内容区域之间存在差距。 我需要内容区域具有最小宽度，我希望区域水平增长以填补这个空白： http ： //img89.imageshack.us/img89/296/floatingdivs001.png 。

例如块的宽度是100px; 最小内容区域应为200px。 我需要内容宽度从200px到299px不等，具体取决于块的区域宽度。

请问，建议是否可以使用纯HTML / CSS实现此类行为？ 我没有限制来避免表格，所以任何有效的方法都是合适的。

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

Answer 1

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

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

Answer 2

你可以用display: table; 和table-cell;

你必须给包装器#main CSS display: table; 和它的儿童table-cell; 。 你必须将移动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>

您可以将块的宽度调整为您想要的任何值， 100%/6=16% ，这就是我使用16％的原因。 如果你想要动态宽度，你可以保留宽度声明，它们会自动调整大小到可用的宽度。 这模仿了表的行为，但仍然是语义标记。

#main
{
    width: 100%;
    display: table;
}

.right {
    display: table-cell;
    width: 200px;
    height: 300px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 300px;
    background: #ccc;
    display: table-cell;
}
.block {
    width: 16%;
    height: 50px;
    float: left;
    border: 1px solid blue;
    display: table-cell;
}​

http://jsfiddle.net/Kyle_Sevenoaks/7sp5M/31/

Answer 3

你可以试试这个：

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

在CSS中：

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

并且为了改变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到块的宽度来考虑边框，你可以使用outerwidth（）insetead。 在这里你可以看到它的运作