容器中的3个div响应页面宽度

Question

我现在整天都在摆弄这个问题.我需要创建一个3列设计,其中中间div具有固定宽度,左/右div是动态的(响应页面宽度).例如:

#container {
float:left;
width:100%;
}

#left {
min-width: 200px;
width: 100%;
}

#middle {
width: 250px;
}

#right {
min-width: 200px;
width: 100%;
}

HTML:

<div id="container">
    <div id="left">
        Left column should expand with the width of the browser - with a min-width.
    </div>

    <div id="middle">
        Middle column with fixed width.
    </div>

    <div id="right">
        Right column should expand with the width of the browser - with a min-width.
    </div>
</div>

我为此创造了一个小提琴:http://jsfiddle.net/2jGAe/ 你能帮我解决这个样式问题吗？

Answer 1

关键是使用:

#container > div {
    display: table-cell;
}

#left和#right divs没有宽度.见演示.