jquery - css 的流体内容布局问题

Question

我有一个布局问题:

.sectorMenuContentPane {
    float: left;
    width: 25%;
}

.sectorContentPane {
    float: left;
    width: 75%;
}

.sectorContentPaneRight {
    float: right;
    width: 32%;
}

以下是我使用相同 CSS 的布局:

在 3 列布局中，页面看起来不错，但在 2 列布局中它就坏了。如果没有 sectorContentPaneRight 那么 sectorContentPane 将根据我的图表填充该区域，我该怎么做？

还好像我需要它一样？你能帮我举个 jsfiddle 的例子吗？

Answer 1

表格将是您最简单的解决方案。这是一个将 div 与 display: table

结合使用的示例

http://jsfiddle.net/9x2SC/

左边和右边的单元格有固定的宽度。中间的一个将填满剩余的空间。这将是您唯一的 100% css 解决方案。您可以使用 Javascript 来确定要做什么并将一个类应用于包装器元素，但这更优雅(在我看来。)

CSS:

.wrapper {
    display: table;
    width: 100%;
    height: 100px;
}

.sectorMenuContentPane {
    display: table-cell;
    width: 25%;
}

.sectorContentPane {
    display: table-cell;
}

.sectorContentPaneRight {
    display: table-cell;
    width: 32%;
}​