Question

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

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

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

此外，我需要在左侧动态列中设置另一组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

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

1 个答案: