Дизайн плитки не согласован
В жерехе.Сетевое приложение, внутри 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[^] и разместите ссылку.