職位問題

Question

如果您查看州下拉框和郵政編碼文本框，郵政編碼框高度重新定位爲下拉框的高度。我怎樣才能保持郵政編碼文本框的城市箱高度相同？

解決---

我能夠這樣同時使用Flexbox的和HTML表來解決。我最初使用flexbox，但沒有意識到我可以使用align-items:flex-start來完成我正在嘗試做的事情。

工作Flexbox的代碼：

    <div class="flex" style="align-items:flex-start"> 
          <div class="selector_container marTop10pt"> 
           <div class="state_container flex padLeft15pt padTop15pt padBtm15pt""> 
            <div class="state">State</div> 
            <div class="right padRight15pt" style="width: 100%"><img style="height: 10pt" src="assets/front/img/down_arrow.png" /></div> 
           </div> 
           <div class="state_option_container off"> 
            <div class="nonselect_selection padBtm20pt">- K -</div> 
            <div class="state_selection">Kentucky</div> 
           </div> 
          </div> 
         <td valign="top"> 
          <input style="width: 100pt" type="textbox" class="txt marLeft5pt zipcode marTop10pt" placeholder="Zip" /> 
        </div> 

工作HTML表格的版本：

    <table> 
        <tr> 
         <td> 
          <div class="selector_container marTop10pt"> 
           <div class="state_container flex padLeft15pt padTop15pt padBtm15pt""> 
            <div class="state">State</div> 
            <div class="right padRight15pt" style="width: 100%"><img style="height: 10pt" src="assets/front/img/down_arrow.png" /></div> 
           </div> 
           <div class="state_option_container off"> 
            <div class="nonselect_selection padBtm20pt">- K -</div> 
            <div class="state_selection">Kentucky</div> 
           </div> 
          </div> 
         </td> 
         <td valign="top"> 
          <input style="width: 100pt" type="textbox" class="txt marLeft5pt zipcode marTop10pt" placeholder="Zip" /> 
         </td> 
        </tr> 
        </table> 

的jQuery：

$('.country_region_container').click(function() { 
    $('.country_region_option_container').toggleClass('off'); 
}); 
$('.state_container').click(function() { 
    $('.state_option_container').toggleClass('off'); 
}); 
$('.state_selection').click(function() { 
    $cloned = $(this).html(); 
    $('.state').replaceWith('<div class="state">'+$cloned+"</div>"); 
    $('.state_option_container').toggleClass('off'); 
}); 
$('.selection').click(function() { 
    $cloned = $(this).html(); 
    $('.country_region').replaceWith('<div style="width:100%" class="country_region">'+$cloned+"</div>"); 
    $('.country_region_option_container').toggleClass('off'); 
}); 

輸出：

Answer 1

地點都在同一個表，並指定高度和寬度尺寸

Answer 2

簡單的形式腳本

#form { 
 
    position: relative; 
 
    margin: 0 auto; 
 
    padding: 10px 15px; 
 
    width: 260px;/*width of your form*/ 
 
    border: 1px solid #efefef; 
 
} 
 

 

 
input,select { 
 
    display: block; 
 
    margin-bottom: 6px; 
 
    width: 100%; 
 
    height: 21px;/*height of inputs*/ 
 
    box-sizing: border-box; 
 
} 
 

 
#state-zip { 
 
    position: relative; 
 
} 
 

 
#cz-right { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    width: 60px; 
 
} 
 

 
#cz-left { 
 
    margin-right: 66px;/*width of zip input + space between zip input and select input*/ 
 
}

<div id="form"> 
 
    <input type="text" placeholder="Street address"/> 
 
    <input type="text" placeholder="City"/> 
 
    <div id="state-zip"> 
 
    <div id="cz-left"> 
 
     <select> 
 
     <option>State</option> 
 
     <option>Option</option> 
 
     </select> 
 
    </div> 
 
    <input id="cz-right" type="text" placeholder="ZIP"/> 
 
    </div> 
 
    <select> 
 
    <option>Country/Region</option> 
 
    <option>Option</option> 
 
    </select> 
 
    
 
    
 
</div>