Question

我有两个必须高度相同的面板。面板的代码如下：

<asp:Panel ID="Panel1"  GroupingText="Material" CssClass="material" 
                runat="server" >

                <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
                <asp:ListItem Selected="True">Plastics</asp:ListItem>
                <asp:ListItem Enabled="false">Glass</asp:ListItem>
                </asp:RadioButtonList>

             </asp:Panel>
<asp:Panel ID="Panel2"  GroupingText="Material" CssClass="design" 
                runat="server" >

                <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
                <asp:ListItem >SV</asp:ListItem>
                <asp:ListItem ">Bifocal</asp:ListItem>
                 <asp:ListItem >Varifocal</asp:ListItem>
                <asp:ListItem >Intermediate</asp:ListItem>
                </asp:RadioButtonList>

             </asp:Panel>

我在下面用css设置了这两个面板的样式：

.material{display:inline-block; float:left;max-height:200px;width:90px;overflow:hidden;}
.design {display:inline-block; float:left;max-height:200px;width:210px;overflow:hidden;}

注意我尝试使高度相同。但是，由于panel1的内容很少，因此面板的边框确实一直高到200px。即使内容未完全填满面板，我怎样才能拥有相同的高度。

Answer 1

当用HTML呈现时，asp.net中的Panel不会呈现为面板，因为面板不是有效的html标记。你可以将div包裹在面板内部并为div提供样式。

<asp:Panel ID="Panel1"  GroupingText="Material" CssClass="material" 
            runat="server" >
            <div class="material">
            <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
            <asp:ListItem Selected="True">Plastics</asp:ListItem>
            <asp:ListItem Enabled="false">Glass</asp:ListItem>
            </asp:RadioButtonList>
            </div>
         </asp:Panel>
<asp:Panel ID="Panel2"  GroupingText="Material" CssClass="design" 
            runat="server" >
            <div class="design">
            <asp:RadioButtonList ID="RadioButtonList1"   runat="server" >
            <asp:ListItem >SV</asp:ListItem>
            <asp:ListItem ">Bifocal</asp:ListItem>
             <asp:ListItem >Varifocal</asp:ListItem>
            <asp:ListItem >Intermediate</asp:ListItem>
            </asp:RadioButtonList>
            </div>
         </asp:Panel>

Answer 2

删除你的css中的max-height并添加以下代码：

fieldset {height:200px}

使用未完全填充面板的内容设置面板高度

2 个答案: