Jak utworzyć responsywny układ poziomy za pomocą CSS?

Question

Pracuję dla kreatywnego studia projektowego, który lubi łamać paradygmaty i konwencje, tworząc unikalne układy stron, a ostatnio zaczęliśmy opracowywać poziome układy stron. Podczas gdy poziome układy stron wyglądają "fajnie", muszę jeszcze opracować, jak sprawić, by były płynne i responsywne, jak to tylko możliwe dzięki pionowej, opartej na siatce stronie internetowej, zaraz po wyjęciu z pudełka.

Normalnie na stronie pionowej z pojemnikiem chcesz mieć szerokość procentową opartą na elemencie pojemnika, a następnie ustawić max-width. Dzięki responsywnemu układowi treść nieskończenie przewija się poza stronę, może być różna w szerokości, szczególnie jeśli treść jest unikalna, a zatem cel/kontekst * 100 nie działa tak naprawdę (czy tak?).

Czy istnieje sposób może mieć reagujących Heights, dopełnienia i marginesów na temat elementów, które sprawiają, że działa tak jak ty to siatka oparta czułe internetowej. Nie mam nic przeciwko używaniu JavaScript, ale poprawka CSS byłaby idealna.

celach informacyjnych przykładem rodzaju układ Próbuję utworzyć:

Answer 1

Można to zrobić z jQuery obliczając elementy podrzędne strona pojemnika div za .outerWidth i dodając je wszystkie razem i dołączanie że na stronie lub struktury .css('width')

HTML div:

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

EDIT: zapomniałem dodać css, ale głównym punktem jest to, że chciałbyś, aby divy dziecka z #main były pływające w lewo.

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

Istnieje wiele sposobów, aby to zrobić.

Jeśli znasz dokładną szerokość strony można po prostu zrobić div otoki ustaw pełnej szerokości, a następnie unoszą swoją stronę div content siebie wewnątrz owijki tak:

<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> 

Jeśli znać dokładną szerokość, jest to najprostsze rozwiązanie.

Jeśli szerokość jest nieznany lub różny, można użyć JavaScript do obliczenia pełnej szerokości i zastosować go do owijki z tych samych wyników. To powinno działać dla większości potrzeb.