灵活的div块 [英] Flexible div blocks

问题描述

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

I need a three column block such that, if more content in the center (middle column) - side blocks increased.

现在我有这个 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;
        }

请帮助！

推荐答案

我只更改了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;
}

这篇关于灵活的div块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！