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

对不起，我的问题没有真正明确的标题。我在搜索解决方案时试图找到一个合适的名称，但我找不到描述它的确切方式。如何强制浮动div来填充剩余的水平空间？

我有一个固定大小的div必须向左浮动并像行内块一样工作。我在页面右侧有一个内容区域。下面是一个演示我的意思的例子：http://jsfiddle.net/7sp5M/。如果我尝试改变Result区域的宽度，div会尝试适合块的区域。问题是块的区域和内容区域之间存在差距。我需要“内容”区域具有最小宽度，我希望该区域水平增长以填补此空白：http://img89.imageshack.us/img89/296/floatingdivs001.png。

例如块的宽度是100px;最小内容区域应为200px。我需要的内容宽度根据块的面积宽度从200px到299px不等。

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

更新：谢谢大家的意见。似乎不可能用纯HTML/CSS来实现它。我对此并不确定，因为我还不擅长CSS。我只是用JavaScript和jQuery实现了这样的行为，它按我需要的方式工作。

来源

2012-09-13 LinogeFly

如果你想要5列给每个人说20％的宽度 – kalpaitch

你想根据浏览器的宽度左边div的数量是动态的，浮动的？如果是这样，我想不出如何做到这一点（假设我理解你）。 – Ariel

是的，没错，我想申报单的数量是动态的。并且基于浏览器宽度，应该在一行中包含动态数量的div。 – LinogeFly

我通常会然后把一个内壳块DIV中，这样我就可以指定填充，而不影响宽度：

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

来源

2012-09-13 08:24:40 kalpaitch

你可以用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/

来源

2012-09-13 08:29:01 Kyle

感谢您的评论，但是这是不是真的是我需要的。我需要块有固定的大小。而我需要的内容区域的宽度增长到填充空白区域，看到下面的屏幕： http://img89.imageshack.us/img89/296/floatingdivs001.png – LinogeFly

那么你可以修改这个代码，以便块确实有一个固定的大小。包含div将仍然填满剩余的空间。 – Kyle

你可以试试这个：

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

以及改变我用的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); 

});

的div宽度

我加了2来考虑边框的宽度，你可以使用outerwidth（）。 Here你可以看到它的工作

来源

2012-09-13 10:34:39

感谢您的解决方案！ :) – LinogeFly

不要忘了接受正确的解决方案... –

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

回答

相关问题