修復窗體中的div位置

-1

我在兩個不同的頁面上使用相同的窗體。在第一個每個div都在理想位置整齊。在第二頁上，有一個選擇只在更改後出現（jQuery觸發器），這會導致其下方的div首先出現在右側，但在觸發器之後它會在左側出現。我希望包含單選按鈕的div始終處於左側，就像它在第一頁上一樣。我想修復的部分是#center-add-new-event-form .container-field input[type=radio]。修復窗體中的div位置

這是css。

#center-add-new-event-form, 
 
#center-add-new-event-form * { 
 
    box-sizing: border-box; 
 
} 
 

 
#center-add-new-event-form { 
 
    padding: 20px 10px 0px; 
 
} 
 

 
#center-add-new-event-form .container-field { 
 
    width: 50%; 
 
    float: left; 
 
    padding: 0 10px; 
 
    margin-bottom: 20px;  
 
    vertical-align: top;  
 
} 
 

 
#center-add-new-event-form .container-field label { 
 
    display: block; 
 
    font-weight: 600; 
 
    margin-bottom: 5px; 
 
} 
 

 
#center-add-new-event-form .container-field input[type=text], 
 
    #center-add-new-event-form .container-field select { 
 
    height: 34px; 
 
    border: 1px solid #ddd; 
 
    padding: 0 7px; 
 
    display: block;  
 
    width: 100%; 
 
} 
 

 
#center-add-new-event-form .container-field input[type=radio] 
 
{ 
 
    height: 34px; 
 
    border: 1px solid #ddd; 
 
    padding: 0 7px; 
 
    display: block;  
 
    width: 100%; 
 
} 
 

 

 
#center-add-new-event-form .center-error-message { 
 
    font-size: 0.9em; 
 
    color: darkred; 
 
    display: block; 
 
    margin-left: 1px; 
 
} 
 

 
.center-event-actions { 
 
    border-top: 1px solid #ddd; 
 
    padding: 20px 20px 15px; 
 
    text-align: right; 
 

 
} 
 

 
.clearfix:before,.clearfix:after { 
 
    display: table; 
 
    content: " "; 
 
} 
 

 
.clearfix:after { 
 
    clear: both; 
 
} 
 

 

 
@media screen and (max-width: 767px) { 
 
    #center-add-new-event-form .container-field { 
 
     float: none; 
 
     width: 100%; 
 
    } 
 
}

<form id="center-add-new-event-form" class="clearfix"> 
 

 

 

 
    <div class="container-field" style="width: 100%"> 
 
      <label></label> 
 
      <div id="center-request-details"> 
 

 
      </div> 
 
     </div> 
 

 
     <div class="container-field"> 
 
      <label for="teaching-requests"></label> 
 
      <select id="input-teaching-requests" name="teaching-requests" class="create-request-event ui-widget-content ui-corner-all"> 
 
       <option value=""></option> 
 

 
         <option value=""></option> 
 
      </select> 
 
      <span class="center-error-message"></span> 
 
     </div> 
 
     <div class="container-field"> 
 
      <label for="request-date"></label> 
 
      <input type="text" name='request-date' class="create-request-event event-datepicker ui-widget-content ui-corner-all"> 
 
      <span class="center-error-message"></span> 
 
      </div> 
 
     </div> 
 

 

 
    <div class="container-field"> 
 
     <label for="teaching-start-time"></label> 
 
     <input type="text" name="teaching-start-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all"> 
 
     <span class="center-error-message"></span> 
 
    </div> 
 

 
    <span class="clearfix"></span> 
 

 
    <div class="container-field"> 
 
     <label for="teaching-end-time"></label> 
 
     <input type="text" name="teaching-end-time" class="create-request-event event-timepicker text ui-widget-content ui-corner-all"> 
 
     <span class="center-error-message"></span> 
 
    </div> 
 

 
    <div class="container-field"> 
 
     <label for="teaching-teacher"></label> 
 
     <div id='contanier-teacher-selection'> 
 

 
     </div> 
 
     <span class="center-error-message"></span> 
 

 
    </div>   
 
    <div class="container-field pull-left" align="left"> 
 
     <label for="recursive-events" align="left"> 
 
     <input type="radio" align="left" name="recursive" value="daily"/>Daily 
 
     <input type="radio" align="left" name="recursive" value="weekly"/>Weekly 
 
     <input type="radio" align="left" name="recursive" value="monthly"/>Monthly 
 
     </label> 
 
    </div> 
 
    <span class="center-error-message"></span>   
 
</form> 
 

 
<div class="center-event-actions"> 
 
    <button id="cancel-add-new-event" class='button' data-izimodal-close="" data-izimodal-transitionout="bounceOutDown"></button> 
 
    <button id="add-new-event" class='button button-primary'></button> 
 
</div>

Before After

來源

2017-09-11 R1ddler

可能比較容易解決，如果你不使用顯示隱藏元素：無（這是jQuery的.hide做什麼），但使用可見性：隱藏。 – CBroe

。隱藏不使用，有條件。在更改觸發器之前顯示一個php回顯。你打開窗口，選擇不在那裏，但是echo'd行，你改變其他div的輸入，然後選擇div出現在屏幕上，這反過來會移動左側的收音機div。 – R1ddler

請爲此顯示實際的相關代碼。 – CBroe

它看起來像它是由容器場< =寬度引起的：50％和浮所以當這個div出現它的旁邊出現持續一個解決方案添加

<span class="clearfix"></span>

與單選按鈕的元素之前

來源

2017-09-11 10:33:47

這可能會實現：

#center-add-new-event-form .container-field input[type=radio]:before 
{ 
    height: 34px; 
    border: 1px solid #ddd; 
    padding: 0 7px; 
    display: block;  
    width: 100%; 
} 

#center-add-new-event-form .container-field input[type=radio]:after 
{ 
    height: 34px; 
    border: 1px solid #ddd; 
    padding: 0 7px; 
    display: block;  
    width: 100%; 
    float: right; 
}

來源

2017-09-11 10:37:43 DreamRJ

修復窗體中的div位置

回答

相關問題