2016-04-12 22 views
0

Tekrarlayıcı kullanan addan veri yolu, görüntü yolu vb. Gibi bilgileri almayı ve arkadaki kodu kullanarak veri görünümünde görüntülemeye çalışıyorum. Detayı başarılı bir şekilde alabilir ve görüntüleyebilirim, ancak div hizalaması uygun değil.Dinamik olarak div yaratma sırasında önyükleme düzeni düzgün şekilde hizalanmadı

aspx kodu: arkasında

<div class="row"> 
       <asp:Repeater ID="Repeater2" runat="server"></asp:Repeater> 
       <asp:Repeater ID="Repeater1" runat="server"> 
        <ItemTemplate> 
         <div class="col-sm-4 col-lg-4 col-md-4"> 
          <div class="thumbnail"> 
           <img width="250px" height="300px" src="images/<%#Eval("ImagePath") %>" alt="<%#Eval("ProductName") %>"> 
           <div class="caption"> 
            <h4><%#Eval("ProductName") %></h4> 
            <h4><%#Eval("UnitPrice")%></h4> 
           </div> 
           <div class="clearfix"> 
           </div> 
          </div>         
         </div> 
        </ItemTemplate> 
       </asp:Repeater> 
      </div> 

kodu:

SqlDataAdapter sda = new SqlDataAdapter("SELECT ProductName, UnitPrice, ImagePath FROM Products", con); 
     DataTable dt = new DataTable(); 
     sda.Fill(dt); 

     DataView dv = new DataView(dt); 
     dv.Sort = "ProductName"; // Sort by product name 
     Repeater1.DataSource = dv; 
     Repeater1.DataBind(); 

akım çıkışı: screenshot Beklenen çıkış : gridview kavramını bootstrap göre dördüncü görüntü ilk resmin altına gelmelidir olan Benim durumumda gerçekleşmeyen ve tüm düzen değiştiği için.

Yeni başlayan biriyim ve sadece önyükleme öğrenmeye başladım.

+0

Bunun nedeni, div'un otomatik yüksekliğinizin olmasıdır. Lütfen div yüksekliğini düzeltin ve sorununuzu çözecektir. –

+0

Div yüksekliğini düzeltebilir veya her 3 öğede bir kez

ekleyebilirsiniz. –

cevap

0

Bu sorunu çözmek için iki yol vardır: 1) Satırı 3 sütundan sonra bitirin ve sonraki 3 sütun için 2. satırı başlatın. 2) Sütunlar için eşit yükseklik ekleyin. Aşağıdaki komut dosyasını kullanabilir ve her bir sütuna "yeniden boyutlandırma" sınıfı ekleyebilirsiniz.

function setHeight(column) { 

     var maxHeight = 0; 
     //Get all the element with class = col 
     column = jQuery(column); 
     column.css('height', 'auto'); 
     //Loop all the column 
     column.each(function() { 
      //Store the highest value 
      if (jQuery(this).height() > maxHeight) { 
       maxHeight = jQuery(this).height(); 
      } 
     }); 
     //Set the height 
     column.height(maxHeight); 

} 

jQuery(window).on('load resize', function() { 
    setHeight('.resize-height'); 
}); 
İlgili konular