在 ASP.Net 应用程序中,在数据列表中,已经创建了一些图 block ,如下所示:
<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 代码使所有图 block 的高度相等:
$(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”标签向后显示,并被代码及其按钮覆盖。
我认为这是由于代码部分的绝对定位,但找不到更好的选择。
请告诉我这个问题的解决方案。
最佳答案
给 .coderow 一个 1em 的 font-size,然后给包含 c_desc 的列 2 或 2.5 或 3 em 的 margin-bottom。
我认为这应该可行。 但是,要查看效果,对于每次调整窗口大小,您都应该刷新页面,以便触发 jquery 并重新调整磁贴高度。
希望这对您有所帮助。
关于css - 瓷砖设计不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39241720/