創建三個列，其中兩個固定位置

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-->

來源

2013-02-04 Michael roshdy

這是你想要做的嗎？ http://jsfiddle.net/p4fMV/1/ – 3dgoo

對不起，但不完全一樣，我想在.inner-page中創建這些列，所以這些列會在.inner-page的左邊部分和右邊部分看到，謝謝@ 3dgoo –

我認爲我們需要一些澄清。你有一個三欄的頁面。你離開專欄，你想修正你的右欄。你想要滾動的中心列（3dgoo舉了一個很好的例子）。您的評論需要澄清。您是否希望您的中心列在您的左列和右列下展開？ – ZombieCode

您可以使用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

來源

2013-02-04 23:50:45 3dgoo

歡迎工作，真是太棒了，謝謝@ 3dgoo –

樂意幫忙@Michaelroshdy – 3dgoo

我不認爲這可以通過使用純CSS來完成。你可以設置你的兩個絕對位置，並使用JavaScript滾動事件來更新它們的頂部值，以使它們始終位於導航器之上。

來源

2013-02-04 08:58:50

你能舉一個例子來說明這個絕對位置的動態值嗎？ –

創建三個列，其中兩個固定位置

回答

相關問題