Jquery css的流体内容布局问题

我有一个布局问题：

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

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

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

以下是我使用相同css的布局：

在3列布局中，页面看起来不错，但在2列布局中，页面已损坏。如果没有sectorContentPaneRight，那么sectorContentPane将按照我的图表填充该区域，我如何才能做到这一点

---

也好像我需要它流体？您能帮我举一个JSFIDLE示例吗？

表格将是您最简单的解决方案。下面是一个使用div和

display:table

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

css:

---

表格将是您最简单的解决方案。下面是一个使用div和

display:table

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

css:

一个简单的解决方案：

css

只需避免浮动最右边的div即可

一个简单的解决方案：

css

---

只需避免浮动最右边的div，不确定这是否是您想要的类型

<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>

#菜单{宽度：25%；高度：400px；边框：2px实心#000；浮动：左；右边距：10px；}
#滑块，#内容{宽度：48%；高度：400px；边框：2px实心#000；浮动：左侧；边距右侧：10px；}
#右{宽度：74%；高度：400px；浮点：左；}

不确定这是不是你想要的东西

<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>

#菜单{宽度：25%；高度：400px；边框：2px实心#000；浮动：左；右边距：10px；}
#滑块，#内容{宽度：48%；高度：400px；边框：2px实心#000；浮动：左侧；边距右侧：10px；}
#右{宽度：74%；高度：400px；浮点：左；}

现在，正如您所知，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;
}

---

现在，正如你所知道的，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;
}

---

发布JSFIDLE以便我们可以使用它。sectorContentPaneRight是否嵌套在.sectorContentPane中？我还是使用表发布了一个答案：-）但它不是表标记，只需使用显示表属性divs我如何才能这样做如果没有sectorContentPaneRight，则sectorContentPane会按照我的图表填充该区域：这个问题是否颠倒了？您的图像正在询问相反的问题我假设这是diagramPost a JSFIDLE中的一个输入错误，以便我们可以使用它。sectorContentPaneRight嵌套在.sectorContentPane中吗？我还是使用表发布了一个答案：-）但它不是表标记，只需使用显示表属性divs我如何才能这样做如果没有sectorContentPaneRight，则sectorContentPane会按照我的图表填充该区域：这个问题是否颠倒了？你的图像在问相反的问题，我假设这是diagramnice示例中的一个输入错误，但根据查询：在第二个div中，内容不会出现：它将只是菜单和滑块；我想我不明白你的评论：在OP示例中，第二幅图像在你的eg中没有滑块。你在第一部分有菜单、滑块和内容；第二部分是菜单和内容，而第二部分应该是菜单和滑块，根据问题。哦，你说得对：图像和问题正好相反。我曾要求在上面的一个例子中发表评论，但根据查询：在第二个div中，内容不会出现：它将只是菜单和滑块；我想我不明白你的评论：在OP示例中，第二幅图像在你的eg中没有滑块。你在第一部分有菜单、滑块和内容；第二部分是菜单和内容，而第二部分应该是菜单和滑块，根据问题。哦，你说得对：图像和问题正好相反。我要求在上面的评论中发表评论