4

抱歉，我的问题没有明确的标题。在搜索解决方案时，我试图为它找到一个合适的名称，但我找不到描述它的确切方式。

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

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

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

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

4

3 回答 3

2

然后我通常会在块 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-13T08:24:40.820 回答
1

你可以试试这个：

<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。在这里你可以看到它的工作

于 2012-09-13T10:34:39.797 回答
1

display: table;你可以这样做table-cell;

您必须为包装器#main提供 CSSdisplay: 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-13T08:29:01.667 回答