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

Question

我有一个布局问题：

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

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

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

这是我使用相同 css 的布局：

在 3 列布局中，页面看起来不错，但在 2 列布局中它已损坏。如果没有扇区内容窗格，我该如何做到这一点，然后扇区内容窗格会按照我的图表填充该区域？

还好像我需要它流体？你能帮我举一个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%;
}​

Answer 2

一个简单的解决方案：http: //jsfiddle.net/JdpYP/

css

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

.slider {
    float: left;
    width: 32%;
}

只是避免浮动最右边的div

Answer 3

现在你知道很多人都在使用 CSS3。

这可以使用 CSS3 轻松完成。

这是你如何做到的..

.containerOfDivs{
   width:950px;
   display:-webkit-box;
   -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
}

.sectorMenuContentPane{
   width: 250px;
}

.sectorContentPane {
   display:-webkit-box;
   -webkit-box-flex: 1;
}

.sectorContentPaneRight {
    width: 250px;
}

Answer 4

不确定这是否是您所追求的？

<div id="menu"></div>
<div id="right">
    <div id="slider"></div>
    <div id="content"></div>
</div>

<style>
    #menu { width:25%; height:400px; border:2px solid #000; float:left; margin-right:10px; }
    #slider, #content { width:48%; height:400px; border:2px solid #000; float:left; margin-right:10px; }
    #right { width:74%; height:400px; float:left; }
</style>