jQuery Mobile - 保持佈局網格垂直對齊

Question

我爲表單驗證項目使用jQuery Mobile（JQM）佈局網格。問題是，當我添加上述領域的一個錯誤，在同一電網的其他領域看起來錯位垂直：

我想保持領域內聯不管它們上面的錯誤，最好僅使用css/HTML/JQM。錯誤消息必須保留在ui-block-a或b div內。

這裏是HTML。有什麼JQM提供了默認的無CSS樣式之外：

<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
     <label> 
      City: 
      <input type="text"/> 
     </label> 
    </div> 
    <div class="ui-block-b"> 
     <div class="field-validation-error">The State field is required</div> 
     <label> 
      State: 
      <select> 
       <option selected="selected">Select a state...</option> 
      </select> 
     </label> 
    </div> 
</div> 

我曾嘗試以下CSS覆蓋，但它結束了隱藏的錯誤消息。

.ui-grid-a { 
position: relative; 
} 

.ui-block-a { 
padding-right: 7px; 
} 

.ui-block-b { 
padding-left: 7px; 
position: absolute; 
right: 0; 
bottom: 0; 
} 

Answer 1

我假設你隱藏並顯示相應的提交錯誤divs。

http://jsfiddle.net/B95jE/1/

<div class="error-div"> 
    <div class="state-validation-error">The State field is required</div> 
    <div class="city-validation-error">The city field is required</div> 
</div> 
<br/> 
<div class="ui-grid-a"> 
    <div class="ui-block-a"> 
     <label> 
      City: 
      <input type="text"/> 
     </label> 
    </div> 
    <div class="ui-block-b"> 
     <label> 
      State: 
      <select> 
       <option selected="selected">Select a state...</option> 
      </select> 
     </label> 
    </div> 
</div> 

CSS：

.error-div{ 
    position:relative; 
} 
.ui-grid-a { 
position: relative; 
} 

.ui-block-a { 
float: left; 
} 

.ui-block-b { 
float: right; 
} 

.state-validation-error{ 
    float:right; 
} 

.city-validation-error{ 
    float:left; 
    display:none; 
}