Question

我在屏幕上有两个面板，每个面板都有半屏尺寸。

<body>
  <div class="wrapper">
  <div id="left" data-pane="leftpane"></div>
  <div id="right" data-pane="rightpane"></div>
</div> 

<script>
  (function(){
    var left = $('div#left')
    left.on('click', function () {
      console.log('pane clicked');
      left.animate({'width': '+=200'},1000, 'swing', function () {
        console.log($(this).data('pane') + ' ready');
      });
    }); //end onclick
  })();
</script>
</body>

和一些css

.wrapper{
  width: 100vw;
  overflow: auto;
}

#left{
  display: block;
  float: left;
  width: calc(100vw / 2 );  
  height:100vh;
  background: #c6c6c6;
}

#right{
  display: block;
  float: right;
  width: calc(100vw / 2 );  
  height: 100vh;
  background: #666;
}

当我点击一个左边（例如）块时 - 它会像预期的那样增长，但是相反的块会下降，因为我不知道如何同时和无痛地减小其宽度以保留原始屏幕尺寸。

如果面板能够“掩盖”对面的面板，那就太好了。

任何帮助表示赞赏。感谢

Answer 1

您可以使用50vw成为100vw的一半而不使用calc()

您可以在父级上使用flex，定义#left的宽度，然后将#right设置为flex-grow: 1，以便它使用可用空间...然后调整{ {1}}如你所知，#left会适应。

＆＃13;

#right

＆＃13;

var left = $('div#left')
left.on('click', function() {
  console.log('pane clicked');
  left.animate({
    'width': '+=200'
  }, 1000, 'swing', function() {
    console.log($(this).data('pane') + ' ready');
  });
});

＆＃13;

.wrapper{
  width: 100vw;
  overflow: auto;
  display: flex;
  height:100vh;
}

#left{
  width: 50vw;
  background: #c6c6c6;
}

#right{
  background: #666;
  flex-grow: 1;
}

＆＃13;

如果您希望<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="wrapper"> <div id="left" data-pane="leftpane"></div> <div id="right" data-pane="rightpane"></div> </div>位于#left之上，则可以使用绝对定位

＆＃13;

#right

＆＃13;

var left = $('div#left')
left.on('click', function() {
  console.log('pane clicked');
  left.animate({
    'width': '+=200'
  }, 1000, 'swing', function() {
    console.log($(this).data('pane') + ' ready');
  });
});

＆＃13;

.wrapper{
  width: 100vw;
  overflow: auto;
  position: relative;
}

#left,#right {
  height: 100vh;
  width: 50vw;
}

#left{
  background: #c6c6c6;
  position: relative;
  z-index: 1;
}

#right{
  background: #666;
  position: absolute;
  right: 0; top: 0;
}

＆＃13;

尝试使用CSS和jQuery分离屏幕面板

1 个答案: