1

現在コーディングしているこのページで何が起こっているのかよくわかりませんが、何らかの理由で、最初に読み込まれたときにコンテナー div がページの下部近くに座っていますが、サイズを変更すると、想定どおりに jquery によって中央に配置されますに。以下にコードを貼り付けますが、実際に見ることができるように、以下にリンクされている jsfiddle があります。 http://jsfiddle.net/jhwNK/

これはすべてを中心とするjqueryです

var positionContent = function () {
var width = $(window).width(); // the window width
var height = $(window).height(); // the window height
var containerwidth = $('.container').outerWidth(); // the container div width
var containerheight = $('.container').outerHeight(); // the container div height
if ((width >= containerwidth) && (height>=containerheight)){
$('.container').css({position:'absolute',
left: ($(window).width() - $('.container').outerWidth())/2,
top: ($(window).height() - $('.container').outerHeight())/2 }); 
} 
};
//Call this when the window first loads
$(document).ready(positionContent);
//Call this whenever the window resizes.
$(window).bind('resize', positionContent);

これがCSSです

    .logo {background:url(../images/logo/logo.png); width:255px; height:77px;}

    .menucontainer {min-width:300px; min-height:300px; float:left; background:#000;}

    .content {background:#eee; width:500px; float:left; padding:10px; overflow:auto;}

    /* #Base 960 Grid
    ================================================== */

      .container {padding: 20px;    margin: 20px 0; background-color:rgba(255, 255, 255, 0.9);      color: #525252;  position: relative; width: 960px; margin: 0 auto;}

    /* #Tablet (Portrait)
    ================================================== */

        /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
                .container                                  { width: 768px;}
                .content {width:300px;}
                }

    /* #Tablet (Portrait)
    ================================================== */

        /* Note: Design for a width of 768px */

        @media only screen and (min-width: 960px) and (max-width: 1180px) {
            .container                                  { width: 768px;}
            .content {width:300px;} 
            }

            /*  #Mobile (Portrait)
    ================================================== */

        /* Note: Design for a width of 320px */

        @media only screen and (max-width: 767px) {
             .container { width: 300px;}
             .content {width:100px;}
             }

        /* #Mobile (Landscape)
    ================================================== */

        /* Note: Design for a width of 480px */

        @media only screen and (min-width: 480px) and (max-width: 767px) {
            .container { width: 420px;}
            .content {width:150px;}
            }

そして、html

    <div class="container">
    <div class="logo"></div>
     <div class="menucontainer"></div>
     <div class="content">
       <p>Passion stands for the enthusiasm and fervour we put into everything we do in the company, and in developing the right organisational mix to help others in every possible way<br />
         we want every guest to experience that passion for life by having the most relaxing, blissful and luxurious stay possible, a time filled with personal discovery, recovery and spiritual fulfillment.</p>
       <p>We want every employee to taste that passion for life by growing in confidence and skills, and feeling part of a close-knit global family.</p>
     </div>
    </div>
4

2 に答える 2

0

最後に追加.resize()してみてください：

$(window).bind('resize', positionContent).resize();
于 2013-03-05T10:14:17.300 に答える
0

問題は、DOM の準備が整ったときに要素を最初に配置することです。ただし、画像やインポートされたスタイルシートがロードされるときなど、大きな再描画が行われる可能性がある時期です。

window.onloadしたがって、イベントにもバインドする必要があります。

$(window).bind('resize load', positionContent);

これにより、すべてのアセットが読み込まれ、ページが最終的なレンダリング状態になると、再びポジショニングが開始されます。

于 2013-03-05T10:19:58.237 に答える