如何在折叠面板展开时调整元素的宽度？

我正在使用Visual Studio附带的Web应用程序模板。我添加了一个嵌套的母版页，将主要内容分割为两个其他内容占位符，这两个内容占位符都被封装在应用了CSS样式的div中，以试图控制宽度。其中一个用作从此嵌套母版页继承的每个页面的主要内容区域，另一个内容占位符用作可从左到右展开和折叠的侧面板。该侧面板将在大多数页面中保留。这就是为什么它在内容占位符中的原因，以便在不需要它的页面中可以创建自定义内容，然后将其保留为空或使用其他数据。使用ajax的可折叠面板扩展器可以实现此功能，但主要内容区域的大小具有锁定宽度。在我的CSS中，我在主内容区域设置了最大宽度和最小宽度，但它只将其设置为最小宽度。在阅读css文档后，我发现min-width属性覆盖了max-width和width属性。我的问题是，如何在侧面板折叠时将主内容区域的宽度设置为95％，并将侧面板展开时宽度为75％？我试图包含尽可能多的相关信息，但如果需要更多信息，我会很乐意提供。如何在折叠面板展开时调整元素的宽度？

从我的嵌套母版页相关的标记

<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server"> 
<div style="width: 100%; height: 100%;"> 
    <div class="leftSidePanel"> 
    <asp:ContentPlaceHolder ID="LeftSidePanelContent" runat="server">   
     <asp:Panel ID="Panel2" runat="server" CssClass="collapseLeftSidePanelHeader" > 
      <div style="padding: 5px; cursor: pointer; vertical-align: middle;"> 
       <asp:ImageButton ID="Image1" runat="server" ImageUrl="~/Images/CollapsiblePanel/expand_blue.jpg" AlternateText="(Show Details...)" /> 
      </div> 
     </asp:Panel> 
     <asp:Panel ID="Panel1" runat="server" CssClass="collapseLeftSidePanel" > 
      <br /> 

      <asp:Label ID="Label1" runat="server" Text="MY PANEL"></asp:Label> 
      </asp:Panel> 
      <ajax:collapsiblepanelextender ID="cpeLeftSidePanel" runat="Server" 
       ExpandedSize="250" 
       CollapsedSize="0" 
       ExpandDirection="Horizontal" 
       TargetControlID="Panel1" 
       ExpandControlID="Panel2" 
       CollapseControlID="Panel2" 
       Collapsed="True" 
       TextLabelID="Label1" 
       ImageControlID="Image1" 
       ExpandedImage="~/Images/CollapsiblePanel/collapse_blue.jpg" 
       CollapsedImage="~/Images/CollapsiblePanel/expand_blue.jpg" 
       SuppressPostBack="true" /> 
    </asp:ContentPlaceHolder> 
    </div> 
    <div class="mainPanel"> 
     <asp:ContentPlaceHolder ID="MainPanelContent" runat="server"> 
     </asp:ContentPlaceHolder> 
    </div> 
</div>

相关的CSS：为合拢面板的宽度在可折叠的面板扩展设置

.main 
{ 
    padding: 0em 1em; 
    margin: 1em; 
    width: 100%; 
    min-height: 420px; 
    border: thin solid black; 
} 

.mainPanel{ 
    max-width: 90%; 
    min-width: 75%; 
    height: 100%; 
    float:right; 
    border: thin solid green; 
} 

.leftSidePanel{ 
    min-width: 0; 
    max-width: 20%; 
    height: 100%; 
    float: left; 
    border: thin solid blue; 
} 


.collapseLeftSidePanelHeader{ 
    width:30px; 
    height:100%; 
    background-repeat:repeat-y; 
    background-color: AliceBlue; 
    font-weight:bold; 
    float: right; 
} 

.collapseLeftSidePanel { 
    background-color:black; 
    overflow:hidden; 
    width:0; 
    height: 100%; 
}

来源

2016-09-22 Jared Huffstutler

如果有人愿意协助，我仍然在寻找这个问题的帮助。谢谢 –

我才意识到我可以通过添加第二个折叠面板扩展器来解决这个问题，并将它的目标控件ID属性设置为主面板，并将其触发器设置为s的头部ide面板。这样，当侧面板展开时，主面板将折叠，反之亦然。然后，我可以使用展开和折叠尺寸来设置主面板的75％和95％值。这对我来说似乎是一种破绽，我更喜欢更实用的解决方案。

来源

2016-09-22 15:58:02

凹凸碰撞凹凸碰撞 –

如何在折叠面板展开时调整元素的宽度？

回答

相关问题