0

しかし、私は他の多くを読みました）

ポートフォリオ サイトの流動固定流動レイアウトを作成しようとしています。私はオンラインでいくつかの異なるオプションを試しましたが、私が目にするすべての人は、固定-流体-固定または2つの流体カラムが横に離れたレイアウトを提供しています.

横に 2 つのサポート流体列がある中間 (コンテンツ) セクションを持つ単純な 1024px が欲しいです。

提供するコードはあまりありませんが、参考までに何らかの例を作成します。

前もって感謝します - 私はこれを尋ねるのがちょっとばかげているように感じますが、私はここ数年ウェブについて考える必要がなかったので、今では遅れを感じています.

<div class="row-fluid">
    <div class="span3"></div>
</div>

<div id="row-fixed">
    <div class="span6"></div>
</div>

<div id="row-fluid">
    <div class="span3"></div>
</div>
4

1 に答える 1

0

これは、10 年以上前にたくさんのフレームセットを見たときのことを思い出させます。フレーム width="*" を指定するだけで、ページに残っている幅がどれだけでも占有されます。今日の CSS が同じものを提供してくれることを切に願っていますが、そうではありません。

js、css、および html を使用して効果を簡単にエミュレートできます。

HTML:

<div class="container">
     <div class="sidebar pull-left">

     </div>
     <div class="sidebar pull-right">

     </div>
     <div class="main-content">

     </div>
</div>

JS: (Mac OSX でテスト済み - Chrome バージョン 29.0.1547.65) http://jsfiddle.net/mmME5/

function setSidebarWidth(){
    var container_width = $('.container').width();
    var main_content_width = $('.main-content').width();

    //init sidebars
    $('.sidebar').width((container_width - main_content_width)/2);

    return;
}

$(function(){
    //init at document ready
    setSidebarWidth();

    //resize listener
    $(window).resize(function(){
        setSidebarWidth();
    });
});

注: div にマージンがあるかどうかに応じて、js 関数で .outerWidth(true) を使用する必要がある場合があります。

次に、高さ、背景、境界線などを適切にスタイルアップします。

運が良ければ教えてください。

于 2013-09-04T04:35:24.537 に答える