1

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

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

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

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

4

1 回答 1

3

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

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

演示

于 2013-03-01T12:22:56.783 回答