5

私は、パラダイムや慣習を打ち破って独自の Web サイト レイアウトを作成するのが好きなクリエイティブ デザイン スタジオで働いており、最近、横型の Web サイト レイアウトの開発を開始しました。水平方向の Web サイト レイアウトは「クール」に見えますが、すぐに使える垂直方向のグリッド ベースの Web サイトのように、それらを流動的でレスポンシブにする方法をまだ考えていません。

通常、コンテナを含む縦型 Web サイトの場合、コンテナ要素にパーセンテージ ベースの幅を設定してから、最大幅を設定します。レスポンシブ レイアウトでは、コンテンツがページから無限にスクロールされます。特にコンテンツが一意である場合は幅が変化する可能性があるため、式ターゲット/コンテキスト * 100 は実際には機能しません (または機能しますか?)。

グリッドベースのレスポンシブWebサイトと同じように機能させるために、要素にレスポンシブな高さ、パディング、マージンを持たせる方法はおそらくありますか. Javascript を使用する必要はありませんが、CSS の修正が理想的です。

参考までに、作成しようとしているレイアウトのタイプの例を示します。

ここに画像の説明を入力

4

2 に答える 2

4

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

HTML構造：

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

編集：cssを追加するのを忘れましたが、ここでの主なポイントは、の子divを#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'});
    }
}
于 2012-10-12T20:06:55.447 に答える
1

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

ページの正確な幅がわかっている場合は、ラッパー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を使用して全幅を計算し、それをラッパーに適用して同じ結果を得ることができます。これはほとんどのニーズに対応するはずです。

于 2012-07-12T03:35:48.167 に答える