Member 8057273 Ответов: 0

Дизайн плитки не согласован


В жерехе.Сетевое приложение, внутри datalist, некоторые плитки были созданы как под:

<asp:DataList ID="DataList2" class="itemdatalist" runat="server" Width="100%" RepeatDirection="Horizontal" onitemcommand="DataList2_ItemCommand" RepeatLayout="Flow">
<ItemTemplate>
 <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6 producttile">
  <div class="row">
   <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">  
    <center><asp:Image ID="Image2" runat="server" ImageUrl='<%#Eval("image")%>' class="img-responsive" /></center>
   </div>
  </div>
  <br />
  <div class="row">
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
     <asp:Label ID="Label6" runat="server" Text='<%#Eval("company")%>' class="couponlabels"></asp:Label>
    </div>
   </div>
   <div class="row">
    <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
     <asp:Label ID="Label7" runat="server" Text='<%#Eval("c_title")%>' class="couponlabels"></asp:Label>
    </div>
   </div>
     <div class="row">
      <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
      <asp:Label ID="Label15" runat="server" Text='<%#Eval("c_desc")%>' class="couponlabels"></asp:Label>
      </div>
     </div>
     <div class="row coderow">
      <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
       Code:
       <a href='<%#Eval("c_link")%>' target="_blank">
        <input name="BtnSelect" class="copymove btn-block btn-info" type="button" value='<%#Eval("c_code")%>' title="Click to Copy Code and Shop" />          
       </a>
      </div>
     </div>
    </div>
  </ItemTemplate>
</asp:DataList>


Высота всех плиток была сделана равной с помощью следующего кода jquery:

$(window).load(function () 
{
 var maxHeight = Math.max.apply(null, $(".producttile").map(function () {
                    return $(this).height();
 }).get());
 $('.producttile').height(maxHeight);
});


и это изменение размера воков прекрасно.

Теперь, чтобы убедиться, что код и его кнопка отображаются в нижней части плиток, был написан следующий css:

.coderow
{
 position: absolute;
 bottom: 5px;
}


Проблема возникает, когда я изменяю размер окна браузера, чтобы проверить результаты при различных размерах устройств. При некоторых размерах окон я обнаружил, что метка "Expiring on" отображается задом наперед и перезаписывается кодом и его кнопкой.

Я думаю, что это связано с абсолютным позиционированием части кода, но не могу придумать лучшей альтернативы.

Пожалуйста, подскажите мне решение этого вопроса.

Что я уже пробовал:

Я пытался изменить расположение раздела кода и дополнительных дивов с помощью bootstrap, но ни один из них не сработал.

Richard Deeming

Создание coderow абсолютно-позиционированный уберет его из расчета на высоту producttile. Вам нужно будет добавить достаточное количество отступов в нижнюю часть экрана. producttile чтобы оставить место для coderow.

Кроме того, если вы можете отказаться от поддержки IE9 и более ранних версий, вы можете попробовать На основе адаптируемых блоков[^], что делает подобные вещи намного проще.

Попробуйте создать небольшую демонстрацию проблемы в JSFiddle[^] и разместите ссылку.

0 Ответов