0

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-->
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 回答
0

我不认为这可以用纯CSS来完成。您可以将您的两个设置在绝对位置并使用 javascript 滚动事件更新它们的最高值，以使它们始终位于导航器的顶部。

于 2013-02-04T08:58:50.887 回答