タイルデザイン一致しない

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のフォントサイズを与え、次にc_descを含む列に2または2.5または3emの余白を付けます。

これはうまくいくと思います。 しかし、エフェクトを表示するには、すべてのウィンドウのサイズ変更のために、ページを更新してjqueryが起動され、タイルの高さが再調整されるようにする必要があります。

これが役に立ちます。