html - 中间列的灵活宽度与 CSS

Question

我有一个三列布局 - 左、中和右。

<div id="content-area" class="clearfix">

    <div id="content-left"><img src="fileadmin/billeder/logo.jpg" width="180" height="35" alt=""></div>

    <div id="content-middle"><f:format.html>{content_middle}</f:format.html></div>

    <div id="content-right">
        <f:format.raw>{navigator}</f:format.raw>
        <f:format.raw>{content_right}</f:format.raw>
    </div>

</div>

使用这个 CSS

#all-wrapper {
    width: 960px;
    margin: 0 auto;
}

#content-area {
    padding: 10px 0;
    margin: 5px auto;
}

#content-left {
    float: left;
    width: 180px;
    min-height: 400px;
}

#content-middle {
    width: 600px;
    text-align: left;
    padding: 0 10px;
    line-height: 20px;
}

#content-right {
    float: right;
    min-width: 180px;
    min-height: 200px;
    text-align: left;
}

左边是180px，中间是600px，右边是180px，做成960px的布局，像这样。

http://jsfiddle.net/kxuW6/

在大多数情况下，这按预期工作，但我希望中间列根据右列中的内容具有一定程度的灵活宽度。 我在右栏中放了一张宽度为 360px 的图像，中间栏的宽度为 420px。

我的问题是宽度超过 180px 的图片，fx. 360px，将打破列的 float ，按照这个 fiddle

http://jsfiddle.net/5hNy5/

我希望它像这个 fiddle 一样，但中间列没有固定宽度。

http://jsfiddle.net/Eqwat/

Answer 1

使用 display: table-cell 而不是 floats...

如果您支持更现代的浏览器，您可以尝试:

#content-area {
    width: 960px;
    padding: 10px 0;
    margin: 5px auto;
    display: table;
    border: 1px dashed blue;
}
#content-left {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    width: 180px;
    height: 200px;
}
#content-middle {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    text-align: left;
    padding: 0 10px;
    line-height: 20px;
}
#content-middle p {
    margin-top: 10px;
}
#content-right {
    display: table-cell;
    border: 1px dotted blue;
    vertical-align: top;
    width: 180px;
    height: 200px;
    text-align: left;
}

表格单元格的宽度值就像一个最小值，因此如果您将图像插入其中一列，左列和右列将扩展，中间列将调整以占用剩余的宽度。

参见演示:http://jsfiddle.net/audetwebdesign/V7YNF/