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没有宽度。请参阅demo。

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

1 个答案: