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（）。 Here你可以看到它正常工作

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

3 个答案: