Come creare un layout orizzontale reattivo usando i CSS?

Question

Lavoro per uno studio di design creativo che ama rompere paradigmi e convenzioni per creare layout di siti Web unici e recentemente abbiamo iniziato a sviluppare layout di siti Web orizzontali. Mentre i layout orizzontali dei siti web sembrano "fantastici", devo ancora capire come renderli fluidi e reattivi come è possibile con un sito Web basato su una griglia verticale pronto all'uso.

Normalmente per un sito Web verticale con un contenitore si avrebbe una larghezza basata sulla percentuale sull'elemento del contenitore, quindi impostare una larghezza massima. Con un layout reattivo, il contenuto scorre infinitamente fuori dalla pagina, può variare in larghezza, specialmente se il contenuto è unico e quindi la formula target/context * 100 non funziona (o lo fa?).

C'è forse un modo per avere altezze di risposta, riempimento e margini sugli elementi per farlo funzionare proprio come si farebbe con un sito web reattivo basato su una griglia. Non mi dispiace dover usare Javascript, ma una soluzione CSS sarebbe l'ideale.

Per il vostro riferimento un esempio del tipo di layout che sto cercando di creare:

Answer 1

È possibile farlo con jQuery calcolando elementi figlio pagina contenitore del div .outerWidth e aggiungendo tutti insieme e aggiungendo che la pagina o la struttura .css('width')

HTML del div:

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

EDIT: ho ho dimenticato di aggiungere il css, ma il punto principale qui è che vorresti che i div del bambino di #main fossero a sinistra.

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

Ci sono molti modi per farlo.

Se si conosce l'esatta larghezza della pagina si può solo fare un div involucro, impostare la larghezza, e quindi galleggiare vostro fianco div contenuti a fianco all'interno del involucro in questo modo:

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

Se conoscere la larghezza esatta, questa è la soluzione più semplice.

Se la larghezza è sconosciuta o varia, è possibile utilizzare JavaScript per calcolare l'intera larghezza e applicarla al wrapper con gli stessi risultati. Questo dovrebbe funzionare per la maggior parte delle esigenze.