兩側的CSS垂直菜單

Question

我正在嘗試創建一個在主要內容部分的每一側具有兩個垂直菜單的設計。 我嘗試了內聯，相對和固定位置的各種組合，但無法正常工作。

小提琴： https : //jsfiddle.net/g4vbampm/3/

菜單（紅色和藍色塊）應該在中間的綠色部分的右邊（position：fixed放置在屏幕的左側）。 它們也應該從屏幕頂部開始，並且永遠不要動。 中間的綠色部分的高度將隨js代碼動態變化。

 .app { text-align: center; } .left { background: red; width: 150px; height: 300px; display: inline-block; } .center { background: green; width: 300px; height: auto; display: inline-block; } .right { background: blue; width: 150px; height: 300px; display: inline-block; } 

 <div class="app"> <div class="left"> menu1 <br/>menu2 <br/>menu3 <br/> </div> <div class="center"> CONTENT <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/>a <br/> </div> <div class="right"> menu1 <br/>menu2 <br/>menu3 <br/> </div> </div> 

Answer 1

嘗試一次

 .app{ text-align:center; } .left{ background:red; width:150px; height:300px; position:fixed; float:left; left:0px; } .center{ background:green; width:calc(100% - 300px); width:-webkit-calc(100% - 300px); width:-moz-calc(100% - 300px); height:auto; float:left; margin-left:150px; } .right{ background:blue; width:150px; height:300px; position:fixed; float:left; right:0px; } 

 <div class="app"> <div class="left"> menu1<br/> menu2<br/> menu3<br/> </div> <div class="center"> CONTENT<br/> a<br/> a<br/> a<br/> a<br/> a<br/>a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/>a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> a<br/> </div> <div class="right"> menu1<br/> menu2<br/> menu3<br/> </div> </div> 

Answer 2

如果您想在左右div上使用固定位置，甚至在u滾動時也要這樣做。

 * { margin: 0; } .left, .right { position: fixed; top: 0; width: 150px; height: 300px } .left { left: 0; background: red; } .right { right: 0; background: blue; } .center { width: calc(100% - 300px); margin: 0 auto; background: green; } 

 <div class="app"> <div class="left"> content </div> <div class="center"> content content contentcontent <br><br><br><br><br><br><br><br><br><br> contetn </div> <div class="right"> content </div> </div> 

請記住，僅當您未重置html時，才使用* {margin：0}。

Answer 3

以下應該為您工作：

.app{
        text-align:center;
    }

    .left{
      position:fixed;
      background:red;
      width:150px;
      height:300px;
      left:0;
      float: left;
    }

    .center{
      position: relative;
      background:green;
      width:300px;
      height:auto;
      left: 140px;
      float: left;
    }

    .right{
      position: fixed;
      background:blue; 
      width:150px;
      height:300px;
      left: 445px;
      float: left;
    }

https://jsfiddle.net/9wnwL7rp/

Answer 4

菜單（紅色和藍色塊）應該在中間的綠色部分的右邊（position：fixed放置在屏幕的左側）。 它們也應該從屏幕頂部開始，並且永遠不要動。

如果他們“從不移動”，則需要position:fixed （除非要通過JavaScript不斷調整位置，這在性能和視覺效果方面通常很差）。

固定位置始終以視口為參考點。 但是，如果您動態計算位置，您仍然可以在這里使用它。

您的中間元素的寬度為300px，因此其他兩個元素的位置必須分別為正確的50％+ 150px。 左（在每種情況下都是相反的）。

.left,
.right {
  position: fixed;
  top: 0;
}
.left{
  background:red;
  width:150px;
  height:300px;
  right: calc(50% + 150px);
}
.right{
  background:blue; 
  width:150px;
  height:300px;
  left: calc(50% + 150px);
}

https://jsfiddle.net/g4vbampm/4/

瀏覽器對calc的支持非常好， http：//caniuse.com/#search=calc

如果您需要它在不支持calc的瀏覽器中運行，也可以使用負邊距從中間偏移元素，

.left{
  right: 50%;
  margin-right: 150px;
}

https://jsfiddle.net/g4vbampm/7/

Answer 5

嘗試使用css float屬性。 http://www.w3schools.com/css/css_float.asp 。 但是您必須將主容器分成3列。 因此.left類的寬度為33.3％，依此類推。 如果您想要一些用於網格系統的良好html框架，請嘗試查看http://getbootstrap.com/網格系統