css - 容器中的 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 div 上没有宽度。见演示。