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

我相信这已被回答了很多之前，但我可以找到的解决方案，需要在左边的固定列和在右边的动态列的解决方案。我的情况不同，因为我需要在左侧有一个动态列，而右侧需要一个固定列。动态左和固定右列宽div使用css

我有这样的工作，但只要我尝试在左侧（动态大小）列内部构建额外的列，它将下降到右侧（固定宽度）列并填充页面的整个宽度。

我真正需要的是动态的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>

来源

2013-03-01 Karl

删除float:left，并添加display:table-cell为左，右div的。

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

DEMO

来源

2013-03-01 12:22:56 Sowmya

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

回答

相关问题