1

これまで説明できなかったので、うまく説明できれば幸いです。

私はこのようなことを達成しようとしています...ウェブページを3つに分割し、タイトルを中央に置きます。

|タイトル左|タイトル|タイトル右|

したがって、タイトルが であると仮定しwidth:500pxます。ウィンドウサイズによって左右のタイトルが変わります。500pxに設定するだけで十分簡単margin: 0 auto;です。これは私がページのコンテンツを持っている方法ですが、タイトルはページの中央に配置されたまま左に伸びる必要があります (またはその500px境界内で左揃えになります)。したがって、タイトルの背景がオレンジ色であるとします。TitleLeft の背景もオレンジにする必要があります。

多分これは私の目的が何であるかを大まかに示しているので（テーブルを使用していて、整列が悪い...可能であればテーブルを避けたい！）役立つでしょう。

http://jsfiddle.net/CmWRu/

4

1 に答える 1

0

私があなたの質問を正しく理解していれば、あなたは次のものを探しています:

  • 中央の列は、画面の中央に固定されています
  • 画面のサイズが変更されても、左と右の列は常にそれぞれ左と右に拡張され、残りの利用可能なスペースを埋めます
  • 見出しは常にそれぞれの div の中央に配置されます。

OK、最初にいくつかの HTML (これを簡単に理解できるように、プレゼンテーション マークアップを使用しています...プロジェクトに意味的に関連するマークアップを決定する必要があります。

<div id="wrapper">
    <div id="left">
        <h2>Title Left</h2>
    </div>
    <div id="center">
        <h2>Title Center</h2>
    </div>
    <div id="right">
        <h2>Title Right</h2>
    </div>
</div><!-- wrapper -->

少しCSS：

#wrapper {
    width: 100%;
    overflow: hidden;
}
#left, #right {
    background: #FF8C00;
}
h2 {
    text-align: center;
}
#center {
    width: 500px;
    float: left;
    background: #e0e0e0;
}

そしていくつかのjQuery：

//document ready function
$(document).ready(function(){

    //on page load, call the resizeColumns function
    resizeColumns(); 

    //and also call it whenever the window resizes
    $(window).resize( resizeColumns );

    //we define the function
    function resizeColumns(){

        //grab the width of the wrapper and save it to a variable
        var windowSize = $('#wrapper').width(), 

        //same thing for the width of the div with id of "center"           
        centerSize = $('#center').width(),

        //windowSize - centerSize = the remaining width of the screen. 
        //Divide that by 2, and that's how wide each remaining column should be. 
        //We save that value to a variable
        fluidSize = (windowSize-centerSize)/2;

        //Now just set the width of the left and right columns equal to fluidSize
        //and float them to the left.
        $('#left, #right').width(fluidSize).css('float','left');

     }

 });
于 2013-01-27T23:57:04.540 に答える