如何強制浮動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。 在這里你可以看到它的運作