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

I'm sure this has been answered alot before, but all I can find are solutions that require a fixed column on the left and a dynamic column on the right. My situation is different in that I require a dynamic column on the left, and a fixed column on the right.

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

I kind of have this working, but as soon as i try to build up additional columns inside the left (dynamic sized) column, it drops below the right (fixed width) column and fills the entire width of the page.

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

What I actually need is for the dynamic columnto never encroach into the fixed right column.

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

Additionally, I need to have another set of 3 columns in the left hand dynamic column, where the left and right columns are fixed, but the centre uses 100% of the available remaining space (within the afore mentioned left dynamic colum).

另外,我需要在左侧动态列中有另一组3列,其中左列和右列是固定的,但中心使用100%的可用剩余空间(在前面提到的左侧动态列中)。

Put simply, I need two columns on the page that between them use 100% of the page width, with the right hand column being fixed width. Inside the left column I also require fixed and dynamic columns that will ignore the outer fixed column.

简而言之,我需要页面上的两列,它们之间使用100%的页面宽度,右侧列是固定宽度。在左列内部,我还需要固定和动态列,忽略外部固定列。

In my example code below, the div with the black border should be glued to the right hand side of the page and be fixed width. The div with the red border should not go any further right on the page than the div with the black border, and the divs with green and orange borders should be the full width of the red border. The centre div in the div with the green border should use all available space between the left and right columns of the green bordered div.

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

I've put the code I have below

我把下面的代码放在了下面

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

1 个解决方案

#1

Remove float:left from the #left's inner div and add display:table-cell for both left and right divs.

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

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

DEMO