Question

我尝试在主要内容部分的每一侧创建一个带有两个垂直菜单的设计。我尝试了内联和相对和固定位置的各种组合，但无法使其工作。

菜单（红色和蓝色块）应紧挨着中间的绿色部分（位置：固定，将其放在屏幕的左边）。它们也应该从屏幕顶部开始，不要移动。中间绿色部分的高度将随js代码动态变化。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

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的固定位置，即使你滚动比这样。

* {
    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（除非你想通过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/网格系统

双面CSS垂直菜单

5 个答案: