Question

在ASP.Net应用程序中，在数据列表中，已经创建了一些区块，如下所示：

<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></b>
      </div>
     </div>
     <div class="row coderow">
      <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
       <b>Code:</b>
       <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”标签向后显示，并被代码及其按钮覆盖。

我认为这是由于代码部分的绝对定位，但无法找到更好的替代方案。

请告诉我这个问题的解决方案。

Answer 1

给.coderow设置1em的字体大小，然后将2或2.5或3em的margin-bottom给予包含c_desc的列。

我认为这应该有效。但是，要查看效果，对于每个窗口调整大小，您应该刷新页面，以便触发您的jquery并重新调整图块高度。

希望这有帮助。

瓷砖设计不一致

1 个答案: