css - 创建三列，其中两个固定位置

Question

jsfiddle 我有三列，但我想要左右两列，固定位置，当我滚动页面时，这些列会随着滚动而出现，我的问题是，我不能让它们都固定在它们的位置上，我还有另一个i18n 问题，当我从 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-->

Answer 1

您可以使用 position: fixed 固定左右列。我们将它们放在正确的位置，方法是将它们放在中心 right: 50%/left: 50% 然后将它们移动到容器宽度的一半margin-right: -500px/margin-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;
}

Demo