瓷砖设计不一致 [英] Tiles design not consistent
问题描述
在ASP.Net应用程序中,在一个数据列表中,一些图块已经创建如下:
In an ASP.Net application, inside a datalist, some tiles have been created as under:
<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代码:
The height of all tiles have been made equal with the following jquery code:
$(window).load(function ()
{
var maxHeight = Math.max.apply(null, $(".producttile").map(function () {
return $(this).height();
}).get());
$('.producttile').height(maxHeight);
});
这个调整大小很好。
现在,为了确保代码及其按钮显示在磁贴的底部,已写入以下css:
and this resizing woks fine.
Now, to ensure that the Code and its button are shown at the bottom of the tiles, following css has been written:
.coderow
{
position: absolute;
bottom: 5px;
}
当我调整浏览器窗口大小以检查各种设备大小的结果时,会出现问题。在某些窗口尺寸下,我发现Expiring on标签向后显示并被代码及其按钮覆盖。
我认为这是由于绝对定位代码部分,但无法找到更好的选择。
请告诉我这个问题的解决方案。
我尝试了什么:
我试图用bootstrap改变代码段和其他div的位置,但没有他们工作了。
The problem arises when I resize the browser window to check results at various device sizes. At some window sizes I found that the 'Expiring on' label is shown backwards and is overwritten by the code and its button.
I think it is due to absolute positioning of the code portion but cannot figure out a better alternative.
Kindly tell me the solution for this issue.
What I have tried:
I have tried to change the positioning of code section and additional divs with bootstrap, but none of them worked.
推荐答案
( window )。load(函数()
{
var maxHeight = 数学 .max .apply( null ,
(window).load(function () { var maxHeight = Math.max.apply(null,
( .produtile)。map( function (){
return
(".producttile").map(function () { return
( this )。height();
})。get());
(this).height(); }).get());
这篇关于瓷砖设计不一致的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!