Erstellen eines reaktiven horizontalen Layouts mit CSS?

Question

Ich arbeite für ein kreatives Designstudio, das gerne Paradigmen und Konventionen bricht, um einzigartige Website-Layouts zu erstellen, und seit kurzem entwickeln wir horizontale Website-Layouts. Während horizontale Website-Layouts "cool" aussehen, muss ich noch herausfinden, wie man sie flüssig und reaktionsschnell wie mit einer vertikalen Grid-basierten Website machen kann.

Normalerweise haben Sie für eine vertikale Website mit einem Container eine prozentuale Breite auf Ihrem Containerelement und legen dann eine maximale Breite fest. Mit einem responsiven Layout scrollt Ihr Inhalt unendlich von der Seite ab, er kann in der Breite variieren, besonders wenn der Inhalt einzigartig ist und daher die Formel target/context * 100 nicht wirklich funktioniert (oder?).

Gibt es vielleicht eine Möglichkeit, die Höhe, die Polsterung und die Ränder der Elemente anzupassen, damit es genauso funktioniert wie eine netzbasierte Website. Es macht mir nichts aus, Javascript zu verwenden, aber ein CSS-Fix wäre ideal.

Für Ihre Referenz ein Beispiel für die Art von Layout versuche ich zu erstellen:

Answer 1

Sie können dies mit jQuery tun, um die Seite div-Container des Kindes Elemente Berechnung .outerWidth und sie alle zusammen das Hinzufügen und Anhängen, dass auf der Seite oder .css('width') des div

HTML-Struktur:

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

EDIT: I Ich habe vergessen, das CSS hinzuzufügen, aber der Hauptpunkt hier ist, dass Sie wollen, dass die Child-Divs von #main nach links schweben.

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

Es gibt viele Möglichkeiten, dies zu tun.

Wenn Sie die genaue Breite der Seite wissen, können Sie einfach einen Wrapper div machen, setzen die volle Breite und dann schweben Ihre Inhalte divs nebeneinander im Inneren der Umhüllung etwa so:

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

Wenn Sie kenne die genaue Breite, das ist die einfachste Lösung.

Wenn die Breite unbekannt ist oder variiert, können Sie JavaScript verwenden, um die volle Breite zu berechnen und sie mit den gleichen Ergebnissen auf den Wrapper anzuwenden. Dies sollte für die meisten Bedürfnisse funktionieren.