javascript - 2个div的内联位置，第一个 child 有auto，第二个 child 有50%

Question

我想用js做一个slidepanel。为此，我想要一个在 slider 打开时调整大小的 div。 尝试做如下:

html

    <div class="wrapper">
       <div class="left">original content</div>
       <div class="right">sliding from right side</div>
    </div>

CSS

    .wrapper {width:100%;height:100%;position:relative;}
    .left {width:auto;height:100%;display:inline-block;}
    .right {width:50%;height:100%;}

这是基本设置。我想留下全宽。但是，当我单击一个按钮时，我想向右滑动到 50%。在添加js之前，我试图定位两个div，但它不起作用。我尝试使用表格单元格、flex、...我只是无法正确使用。有人给个好建议吗？

Answer 1

$("#expand").on("click", function(){
  $(".wrapper").toggleClass("expand");
});

.panel {
  height:100vh;
  transition: width .5s;
}
.left {
    float:left;
    width:100%;
    Background:red;
    Text-align:right;
  }
  .right {
    float:right;
    width:0%;
    background:#ddd;
    overflow:hidden;
  }
.pos {right:5px;}

.wrapper.expand .left {width:50%;}
.wrapper.expand .right {width:50%;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="panel left">
    original content
    <button class="pos" id="expand">Click</button>
  </div>
  <div class="panel right">sliding from right side</div>
</div>