0

私 は3つの列を持っていますが、私は右と左の列を固定位置にしたいです.ページをスクロールすると、これらの列はスクロールに伴います. i18n のもう 1 つの問題は、rtl から ltr に変更したときです。

CSS

    body{
    background:#fff;    
    margin:0px auto 0px auto ;
    padding:0px auto 0px auto ;

}
html{
    background:#fff;    
    margin:0px auto 0px auto ;
    padding:0px auto 0px auto ;
}

.inner-page{
    margin:0px auto 0px auto;
    padding:0px auto 0px auto;
    position: relative;
}
.inner-navbar{
    margin:0px auto 0px auto;
    padding:0px auto 0px auto;
    width:1000px;
}
.inner-page-right{
    background: #000; 
    width:200px;
    min-height:1000px;
            color:#fff;
            float:right
}
.inner-page-center{
    width:600px;
    min-height:1000px;
            float:right
}
.inner-page-left{
    background: #000; 
    width:200px;
    min-height:1000px;
            color:#fff;
            float:left
}
.inner-page-center-up{
    height:50px;
}
.inner-page-center-down{
    background-color:#e6e6e6;
    border:1px solid #cccccc;   
}

と HTML

<div class="inner-page inner-navbar">
    <div class="inner-page-right" >
        column right
    </div><!--inner-page-big-right_right-->
    <div class="inner-page-center">
            column center
    </div><!--inner-page-big-right_right-->
    <div class="inner-page-left">
        column left
    </div><!--inner-page-big-left-->
</div><!--inner-page-->
4

2 に答える 2

1

を使用して左右の列を固定できますposition: fixed。/を使用して中央に配置し、 right: 50%/left: 50%を使用してコンテナーの幅の半分だけ横に移動することで、それらを正しい位置に配置します。margin-right: -500pxmargin-left: -500px

CSS

.inner-page-right {
    ...
    position: fixed;
    top: 0;
    right: 50%;
    margin-right: -500px;
}
.inner-page-left {
    ...
    position: fixed;
    top: 0;
    left: 50%;
    margin-left: -500px;
}

デモ

于 2013-02-04T23:50:45.517 に答える