使用css的动态左列和固定右列宽度div

Question

我确信这个问题之前已经得到了很多回答，但我能找到的只是需要左侧固定列和右侧动态列的解决方案。我的情况不同，我需要左侧是动态列，右侧是固定列。

我有这样的工作，但是一旦我尝试在左侧（动态大小）列内建立额外的列，它就会下降到右侧（固定宽度）列下方并填充页面的整个宽度。

我真正需要的是动态列永远不会侵犯固定的右列。

另外，我需要在左侧动态列中再设置一组 3 列，其中左右列是固定的，但中心使用 100% 的可用剩余空间（在上述左侧动态列内） .

简单地说，我需要页面上的两列，它们之间使用 100% 的页面宽度，右侧列的宽度是固定的。在左列中，我还需要将忽略外部固定列的固定列和动态列。

在下面的示例代码中，带有黑色边框的 div 应该粘在页面的右侧并固定宽度。带有红色边框的 div 在页面上不应比带有黑色边框的 div 更靠右，带有绿色和橙色边框的 div 应该是红色边框的整个宽度。带有绿色边框的 div 中的中心 div 应使用绿色边框 div 左右列之间的所有可用空间。

我已经把我的代码放在下面

<div id="Wrapper" style="width: 100%;">
<div id="Container">

    <div id="right" style="border: solid 10px black; width: 300px; margin-left: 50px; float: right;">
        Fixed right hand column
    </div>

    <div id="left"  style="border: solid 10px red;">
        <div>
            <div style="border: solid 10px green; float: left;">
                <div style="border: solid 1px black; text-align: center; width: 150px; margin-right: 10px; float: left;">
                    Left
                </div>
                <div style="border: solid 1px black; text-align: center; width: 150px; margin-left: 10px; float: right;">
                    Right
                </div>
                <div style="border: solid 1px black; text-align: center; width: 100%;">
                    Centre
                </div>
            </div>
            <div style="clear: both;"></div>
            <div style="border: solid 10px orange;">
                <asp:Panel runat="server" ID="DynamicWidthPanelForLeftColumn" BackColor="#6699ff" Height="250px">
                    This panel should use just the left column but instead uses the entire width of the page.
                </asp:Panel>
            </div>
        </div>
    </div>
</div>

Answer 1

从#left 的内部 div 中删除 float:left 并为左右 div 添加 display:table-cell。

<div style="border: solid 10px green; display:table-cell">
....
</div>

DEMO