三個div彼此相鄰，第三個固定位置

我有三個div，全部應該彼此相鄰，但第三個div需要固定在他的位置。我嘗試使用正確的：0，浮動：正確的，但在這些情況下，第三個div不堅持其他兩個，而是堅持正確的瀏覽器端，這是不是我想要的。我是否必須根據計算的瀏覽器窗口寬度來移動它，或者是否有html/css（或許是bootstrap）方法來執行它？三個div彼此相鄰，第三個固定位置

我有以下的HTML：

 <div id="sub-container"> 
      <div id="left"> 
       {left} 
      </div> 
      <div id="content"> 
       {content} 
      </div> 
      <div id="right"> 
       {right} 
      </div> 
     </div>

而這樣的CSS：

#left { 
    float:left; 
    top:$topbarHeight; 
    width:$leftWidth; 
    position:relative; 
    margin:2px auto; 
    min-height:600px; 
    z-index:1; 
} 

#right { 
    width:$rightWidth; 
    height:604px; 
    top:$topbarHeight; 
    position:fixed; 
    margin-left: 10px; 
} 

#sub-container { 
    position:relative; 
    float:left; 
    max-width:724px; 
    margin:auto; 
    clear: both; 
} 

#content { 
    position:relative; 
    top:$topbarHeight; 
    float:left; 
    max-width:600px; 
}

來源

2016-11-06 Stefan

如果更改正確div的位置，以絕對的，而不是固定的，它會向右移動距離分別爲子容器而不是瀏覽器。

來源

2016-11-06 08:05:08 jjeining

第三個div需要保持固定，因此，將其更改爲絕對不能解決問題。 – Stefan

我必須考慮更多，但似乎你將不得不使用JavaScript來實現這一點。離開我的頭頂，當父屏幕在屏幕上時進行某種滾動偵測，然後在滾動發生時調整第三個div頂部值，就可以實現這一點。這將仍然使用絕對定位。固定的位置必須類似於某種類型的javascript函數運行，但也要檢查父偏移量的頂部和右側，以便爲第三個div的右側和頂部添加測量值。 – jjeining

你可以得到他們全部float: left然後得到正確的，position: absolute和中間的一個，position: relative。然後它會堅持中間的權利，你可以得到它，它的位置。

來源

2016-11-06 08:28:31

如果我將位置更改爲絕對位置，它不再是固定的，我需要它也是固定的，並堅持內容而不是瀏覽器。 – Stefan

#right { 
 
    right:50%; 
 
    height:604px; 
 
    transform: translateX(312px); /*half of your container*/ 
 
    position:fixed; 
 
    margin-left: 10px; 
 
    top:0; /*or however far from the top you want it */ 
 
}

，當你得到你的休息#point未設置變換和並設置權爲0或雖遠，你從邊緣想要它。

來源

2016-11-14 07:01:41

三個div彼此相鄰，第三個固定位置

回答

相關問題