如何使类别和搜索输入框可调整大小

Question

.box {
  margin: 10px auto;
  width: 100%;
  height: 50px;
}
.container {
  width: 900px;
  vertical-align: middle;
  white-space: nowrap;
  position: relative;
  float: left;
}
input#cat,
input#search {
  height: 50px;
  border: 1 solid #2b303b;
  font-size: 10pt;
  float: left;
}
.box1 .container-1 input#cat {
  width: 25%;
}
.box1 input#search {
  width: 75%;
}
.box2 .container-1 input#cat {
  width: 25%;
}
.box2 .container-2 input#cat {
  width: 25%;
}
.box2 input#search {
  width: 50%;
}
.box3 .container-1 input#cat {
  width: 25%;
}
.box3 .container-2 input#cat {
  width: 25%;
}
.box3 .container-3 input#cat {
  width: 25%;
}
.box3 input#search {
  width: 25%;
}

<div class="container">
    <h2>Senario 1</h2>
    <div class="box box1">
      <div class="container-1">
          <input type="cat" id="cat" placeholder="Parent Category (A)">
      </div>
      <div class="container-2">
          <input type="search" id="search" placeholder="Search...">
      </div>
    </div>
    <h2>Senario 2</h2>
    <div class="box box2">
      <div class="container-1">
          <input type="cat" id="cat" placeholder="Parent Category (A)">
      </div>
      <div class="container-2">
          <input type="cat" id="cat" placeholder="Sub-Category (B) of A">
      </div>
      <div class="container-3">
          <input type="search" id="search" placeholder="Search...">
      </div>
    </div>
    <h2>Senario 3</h2>
    <div class="box box3">
      <div class="container-1">
          <input type="cat" id="cat" placeholder="Parent Category (A)">
      </div>
      <div class="container-2">
          <input type="cat" id="cat" placeholder="Sub-Category (B) of A">
      </div>
      <div class="container-3">
          <input type="cat" id="cat" placeholder="Sub-Category (C) of B">
      </div>
      <div class="container-4">
          <input type="search" id="search" placeholder="Search...">
      </div>
    </div>
</div>

我定制了DJ分类高级搜索模块，使父类及其子类与搜索输入框保持一致。我设置了类别的div和搜索输入静态。有没有办法在添加子类别时使它们可调整大小（见图像）。

Main Category + First Child Category + Second Child Category 代码可以总结如下： HTML和CSS

Answer 1

您可以使用jQuery UI resizable函数，请参阅：https://jqueryui.com/resizable/。

＆＃13;

＆＃13;

  $(function() {
    $( "#resizable" ).resizable();
  });

＆＃13;

 #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable h3 { text-align: center; margin: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<div id="resizable" class="ui-widget-content">
  <h3 class="ui-widget-header">Resizable</h3>
</div>

＆＃13;

＆＃13;

＆＃13;