0

同じ高さでなければならない 2 つのパネルがあります。パネルのコードは次のとおりです。

<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を使用して、これら2つのパネルのスタイルを設定しました。

.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 まで伸びています。コンテンツがパネルを完全に埋めていない場合でも、どうすれば同じ高さにできますか。

4

2 に答える 2

1

パネルが有効な html タグではないため、HTML でレンダリングされた asp.net のパネルはパネルとしてレンダリングされません。パネル内で 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>
于 2013-08-05T13:16:07.220 に答える