2013-08-05 3 views
0

У меня есть две панели, которые должны быть одинаковой высоты. Код для панелей ниже:Установка высоты панели с содержимым, которое не заполняет панель полностью

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

Примечание Я попытался сделать высоту же. Однако, поскольку панель1 имеет мало контента, граница панели полностью подходит к высоте 200 пикселей. Как я могу иметь такую ​​же высоту, даже если содержимое не заполняет панель полностью.

+0

Используйте высоту вместо макс-высоты? –

+0

Спасибо за быстрый ответ. У меня все еще нет изменений. –

+1

Это поможет, если вы введете сгенерированный код HTML здесь или на http://jsfiddle.net/. Тем временем попробуйте настроить отображение блока вместо встроенного блока –

ответ

1

Панель в asp.net при визуализации в HTML не отображается в виде панели, поскольку панель не является допустимым тегом 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> 
+0

Спасибо. Я заметил это позже. Я уже получил решение и разместил его. –

0

Удалить максимальную высоту-в вашем CSS и добавить этот код:

fieldset {height:200px} 
Смежные вопросы