0

レスポンシブ Web サイトの設計に問題があります。これまで、私は常に 1024px の固定幅で作業してきました。そうすることで、迷惑なレスポンシブ デザインを避けることができました。しかし、今こそ変化の時です！

まず、ページの幅を最大 1024 ピクセルにしたいのですが、ページが狭くなるとコンテンツも狭くする必要があります。私が現在抱えている問題は、ページを中央に配置する必要があるため、使用すると混乱することですmax-width。margin:auto;

私のページでは、ボックスを含む左側の列が必要で、その右側には別のボックスがあります。全体をページの中央に配置する必要がありますがmargin:auto;、ボックスで使用する場合は、マージンを追加できないため、互いに押し付けられません。また、左側のボックスを左側に配置し、その下に他のボックスが表示されないようにする方法も見つかりません。ページがどのように見えるべきかについて、いくつかのモックアップを作成しました :

全ページ

ここでは、ビューポート (オレンジ色の境界線) とレイアウトを確認できます。緑色のブロックは、ページのその側の高さ全体を占める必要があるため、他のブロックはその下に入りません。ページが狭まると、次のようになります。

狭いページ

要素がページの中央に配置されていることがわかります。また、緑色のブロックは、ページ全体の高さを持つ他のブロックの左側にあるはずです。

おまけ: これが私が予測したよりも手間がかからない場合 (私は何日もいじっています)、緑色のボックスは、スクロールすると、次の画像のようにページにとどまるはずです:全ページスクロール

現在のコードは次のとおりです: jsfiddle

たくさんの画像とテキストの壁であることは知っていますが、これを開始する方法がわかりません...

4

3 に答える 3

2

わかりました、私はあなたが望んでいたもののほとんどを手に入れたと思います. それで十分ですか？

http://jsfiddle.net/wallysalami/T9k74/6/

HTML:

<body>
    <div class='topbox'></div>
    <table id='boxes-table'>
        <tbody>
            <tr>
                <td>
                    <div id='leftbox' class='static-top-position'></div>
                </td>
                <td class='boxes-column'>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                    <div class='box'></div>
                </td>
            </tr>
        </tbody>
    </table>
</body>

CSS:

body
{
    text-align: center;
}

.fixed-top-position
{
    position: fixed;
    top: 10px;
}

.static-top-position
{
    position: static;
}

.topbox
{
    background-color: blue;
    width: 998px;
    height: 50px;
    border: 1px solid grey;
    margin: 13px;
    display: inline-block;
    text-align: left;
}

.box
{
    height:300px;
    width:228px;
    border:1px solid grey;
    display: inline-block;
    background-color: orange;
    margin: 5px;
}

#leftbox
{
    height:300px;
    width:200px;
    border:1px solid red;
    background-color: green;
    margin: 10px 30px 0px 10px;
}

#boxes-table
{
    max-width: 998px;
    display: inline-block;
    margin: auto 0px;
}

#boxes-table > tbody> tr > td
{
    vertical-align: top;
    width: auto;
}

Javascript (jQuery):

$(window).scroll( function() {
    var tableTopPosition = $( '#boxes-table' ).offset( ).top - $( window ).scrollTop( );
    var magicNumber = 5;

    var leftbox = $( '#leftbox' );
    var leftboxClass = leftbox.attr( 'class' );
    var topPosition = leftbox.top;

    if ( tableTopPosition < magicNumber && leftboxClass == 'static-top-position' )
    {
        leftbox.attr( 'class', 'fixed-top-position' );
    } else if ( tableTopPosition > magicNumber && leftboxClass == 'fixed-top-position' )
    {
        leftbox.attr( 'class', 'static-top-position' );
    }
});
于 2013-06-05T14:47:51.033 に答える