CSS Kullanarak Duyarlı Bir Yatay Düzen Nasıl Oluşturulur?

Question

Benzersiz bir web sitesi düzenleri oluşturmak için paradigmaları ve sözleşmeyi bozmayı seven ve yakın zamanda yatay web sitesi düzenleri geliştirmeye başladığımız yaratıcı bir tasarım stüdyosunda çalışıyorum. Yatay web sitesi düzenleri "havalı" görünmekle birlikte, henüz kullanıma hazır, dikey ızgara tabanlı bir web sitesiyle, bunları nasıl akışkan ve duyarlı hale getirebileceğinizi araştırdım.

Normalde kapsayıcılı bir dikey web sitesi için kapsayıcı öğenizde yüzdeye dayalı genişliğe sahip olacaksınız, ardından bir maksimum genişlik ayarlayacaksınız. Duyarlı bir düzen ile içeriğiniz sayfadan sonsuza kadar kayar, özellikle içerik benzersizse ve bu nedenle formülün hedef/içerik * 100 gerçekten işe yaramıyorsa (veya mi?) Genişliğe göre değişebilir. Belki de bir kılavuz tabanlı duyarlı web sitesi gibi çalışmasını sağlamak için öğeler üzerinde duyarlı yükseklikleri, dolgu ve kenar boşlukları olması için bir yol olabilir. Javascript kullanmak zorunda değilim ama CSS düzeltmesi ideal olacaktır. Başvuru için

yerleşimin türüne bir örnek ben oluşturmaya çalışıyorum: Bunu yapmanın pek çok yolu vardır

Answer 1

Sen sayfa konteyner div alt öğeleri hesaplanırken .outerWidth ve hep birlikte ekleyerek ve ekleyerek jQuery ile yapabilirsiniz o sayfa veya div .css('width')

HTML yapısına:

<div id="main"> 
    <div><img src="#" /></div> 
    <div><img src="#" /></div> 
    <div><img src="#" /></div> 
</div> 

EDIT: Ben css'yi eklemeyi unutmuştunuz, ama asıl nokta burada #main'un çocuk bölümlerinin sola kaymasını isteyeceksiniz.

JavaScript:

function() { 
     var window_width = jQuery(window).width(), 
      container = jQuery('#main'), 
      page_width = 0; 

     // Grab every child element of the "main" container 
     container.children().each(function(index){ 
      var incl_margin = true, 
       $this = jQuery(this); 

      // Check if each child element has a margin-left or margin-right 
      if (parseInt($this.css('margin-left')) < 0 || parseInt($this.css('margin-right')) < 0) { 
       var incl_margin = false; 
      } 

      // Get element's width including margins (if they exist from above) 
      var width = $this.outerWidth(incl_margin); 
      page_width += width; 

     }); 

     // Add total width of containers elements as the containers width 
     if(page_width > 0) 
      container.css({'width' : page_width + 'px'}); 
    } 
} 

Answer 2

.

size sadece bir sarıcı div yapabilir sayfanın tam genişliğini biliyorsanız, tam genişliğini ayarlamak ve sonra şöyle mahfaza içine yan içerik div'ler tarafını yüzer:

<div style="width: 2500px; border: red solid 1px;"> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
    <div style="width: 500px; float: left;">Content</div> 
</div> 

Eğer Tam genişliği biliyoruz, bu en basit çözümdür.

Genişlik bilinmiyor veya değişiyorsa, genişliğini tam olarak hesaplamak ve aynı sonuçlarla sargıya uygulamak için JavaScript'i kullanabilirsiniz. Bu çoğu ihtiyaç için çalışmalıdır.