Question

我需要一个三列块，如果中心（中间列）中的内容增加 - 侧块增加。

现在我有http://s2.ipicture.ru/uploads/20110714/NQ6ZNRsB.png

HTML：

<div id="spoiler">
  <div class="left">1</div>
  <div class="middle">
    2<br />
    aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
    hhhhhhhhhhhhhhhhhhhhhhhhh<br />
    aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
    aaaaaaaaaaaaaaaaaaaaaaaaaa<br />
  </div>
  <div class="right">3</div>
</div>

CSS：

            #spoiler {
            width:500px;
        }
        .left, .middle, .right {
            background:#ffdac0;
            height: auto !important;
            height: 100%; /* for IE6 */
        }
        .left {
            float:left;
            width:100px;
        }
        .middle {
            float:left;
            width:300px;
        }
        .right {
            float:right;
            width:100px;
        }

请帮忙！

Answer 1

从.left，.middle，.right中删除背景颜色并将其放在#spoiler上，同时留下一个浮动或在底部有一些清除：

    #spoiler {
        width:500px;
        background:#ffdac0;
        float: left;
    }
    .left, .middle, .right {
        height: auto !important;
        height: 100%; /* for IE6 */
    }
    .left {
        float:left;
        width:100px;
    }
    .middle {
        float:left;
        width:300px;
    }
    .right {
        float:right;
        width:100px;
    }

这将生成您正在寻找的图像。

Answer 2

我只改变了css。

http://jsfiddle.net/QvfwN/

    #spoiler {
    width:500px;
        background:#ffdac0;
        float: left;
}
.left {
    float:left;
    width:100px;
}
.middle {
    float:left;
    width:300px;
}
.right {
    float:right;
    width:100px;
}

Answer 3

只需使用3 TD的表格。这样它总是会扩展。 Div并不意味着像这样彼此合作，因为它们是块元素。

我认为可以做到，但更简单的解决方案是使用好的时尚表：）

灵活的div块

3 个答案: