2 个 div 的内联位置，firstchild 为 auto，第二个 Child 为 50%

Question

我想用 js 构建一个滑动面板。为此，我想要一个在滑块打开时调整大小的 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>