CSSを使用して反応的な水平レイアウトを作成するには？

Question

私はユニークなウェブサイトのレイアウトを作成するためのパラダイムと慣習を打ち破ることを好むクリエイティブなデザインスタジオに取り組んでいます。最近、水平のウェブサイトレイアウトを開発し始めました。水平のウェブサイトのレイアウトは「クール」に見えますが、私はまだ垂直グリッドベースのウェブサイトをそのまま使えるように、それらを流動的かつ反応的にする方法を試していません。

通常、コンテナを持つ垂直型Webサイトの場合、コンテナ要素のパーセンテージベースの幅を持つため、最大幅を設定します。レスポンシブなレイアウトでは、コンテンツはページから無限にスクロールされますが、コンテンツが一意であり、したがって数式のターゲット/コンテキスト* 100が実際には機能しない場合は、幅が変わる可能性があります。

グリッドベースのレスポンシブウェブサイトと同じように、要素の高さ、パディング、マージンを調整する方法がありますか？私はJavascriptを使用する必要はありませんが、CSS修正が理想的です。あなたの参考のために

私が作成しようとしていますレイアウトのタイプの例：

Answer 1

あなたはページコンテナのdivの子要素を計算.outerWidthとすべて一緒にそれらを追加し、追加することによって、jQueryを使ってこれを行うことができ、そのページまたはdiv要素の.css('width')

HTML構造へ：

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

編集：I CSSを追加するのを忘れましたが、ここでの主なポイントは、子divsを#mainにして左に浮動させたいということです。

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

これを行うには多くの方法があります。

あなたはあなただけのラッパーのdivを作ることができるページの幅を正確に知っている場合は、全幅を設定し、そのようにラッパーの内側の側で、あなたのコンテンツのdiv側をフロート：

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

あなたの場合正確な幅を知っている、これは最も簡単な解決策です。

幅が不明または変化する場合は、JavaScriptを使用して全幅を計算し、同じ結果をラッパーに適用できます。これはほとんどのニーズに対応するはずです。