1

このテンプレートを使用します

<style>
    #block_center{
        position: absolute;
        right: 210px;
        left: 210px;
        text-align: left;
        border: 1px solid #000;
        overflow: auto;
        height: auto;
    }
    #block_right{
        width: 200px;
        border: 1px solid #000;
        position: relative;
        right: 3px;     
        text-align: left;
        float: right;   
    }
    #block_left{
        position: relative;
        left: 3px;
        width: 200px;
        border: 1px solid #000;
        text-align: left;
        float: left;
    }        
    #block_content{
        clear: both;
        float: none;
        width: 100%;
        text-align: center;
        overflow-y:auto;
        overflow-x:auto;
        height: auto;
      /* margin-bottom: -50px; */
        margin: auto;

    }
    #block_buttom { 
        background-color: blue;
       /* z-index:  -10; */
        width: 100%;

        height: 50px;
        clear: both;
        }

    .clear {
        clear:both;
        overflow:hidden;
           }  

</style>

<div id="block_content">
    <div id="block_center"> ARTICLE <br> article_ajax_content </div>
    <div id="block_right"> Artile links </div>
    <div id="block_left"> banner </div>
    <div class="clear"></div>
</div>
<div class="clear"></div>
<div id="block_buttom"> some text info about site and 31px height img </div>

私が抱えている問題は、アーティクルがランダムな高さサイズになるだけでなく、ランダムなサイズのコンテンツの ajax ブロックが後に続くことであり、ブラウザー ウィンドウのサイズ、コンテンツに関するすべてのコンテンツの後に、下部の div を絶対に下部に固定することはできません。サイズ、ajax ブロック サイズ...

css (jQuery を使用して下のブロックを固定 y 座標に固定したくない) が私の使用パターンのように見える方法を教えてくれる人はいますか?

4

2 に答える 2

0

これは現在欲しいです

<style>
     #block_buttom { 
        margin-top: 10pt;
       /* z-index:  -10; */
        width: 100%;
        display: inline-block;
        height: auto;
        clear: both;
        }

    .page-buffer {
        padding-top: 50px inherit;
        height: 50px;
        clear: both;
        width: 100%;
    }      

    .clear {
        clear:both;
        font-size:0;
        overflow:hidden; 
           }  


#block_content {
    width:100%;
    text-align:center;
}

#block_left {
    position: relative;
    top: 0px;
    text-align: left;
    float:left;
    width: 10%;
    min-width:210px;
    height: auto;
    padding:  3px;
}

#block_center {
    text-align: left;
    display: inline-block;
    margin:0 auto;
    width:70%;
    min-width: 640px;
    height: auto;
    padding:  3px;
}

#block_right {
    position: relative;
    text-align: left;
    float:right;
    width: 10%;
    min-width:210px;
    height: auto;
    padding:  3px;
}

</style>

高解像度では非常に見栄えがよく、低解像度では - センターブロックのサイズと固定サイズの左/右ブロック間のスペースのバランスを見つけるための調整が必要です

于 2013-01-30T06:15:12.503 に答える
0

すべてのブロックを相対的に配置し、ピクセルではなくパーセンテージを使用して高さと幅を指定します。

すべての高さのパーセンテージの合計が 100% であることを確認してください (画面全体をカバーする場合)。

これにより、画面の解像度に関係なく、ページ コンテンツが画面全体に表示されます。

各ブロックの相対的なサイズも、すべての解像度で同じに保たれます。

重要なのは、PIXEL 値ではなく PERCENTAGE 値を使用することです。

動的サイズの記事データを解決するには、記事の div を CSS してスクロール バーを表示します。

于 2013-01-29T06:06:45.393 に答える