如何使類別和搜索輸入框可調整大小

-2

.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和搜索輸入靜態。有什麼方法可以在添加兒童類別時使其可調整大小（請參見圖片）。 HTML和CSS

來源

2016-02-14 Ziman

沒有人會幫你，如果你不張貼你的代碼，你試過。 –

你大概可以使用jQuery UI的resizable功能，請參閱本：https://jqueryui.com/resizable/

Main Category + First Child Category + Second Child Category 的代碼可以總結如下。

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

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

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

來源

2016-03-05 17:15:24 FlipFloop

如何使類別和搜索輸入框可調整大小

回答

相關問題