自動調整高度和使用CSS構建動態表單的問題

Question

我正在使用基於div的css &表單，目前看起來不錯。但是，我無法使表單的標籤邊與內容一起展開。

右側展開的很好，但我也需要左側展開，因此看起來不錯。在下面的jsFiddle中，您可以看到標籤'Genre'與右側區域的高度不匹配。

這裏是一個的jsfiddle：

http://jsfiddle.net/MSPAn/6/

HTML：

<div id="parent"> 
    <div id="titleArea"> 
     <label for="name" class="label">Name</label> 
     <div class="input"> 
      <input id="name" type="text" /> 
     </div> 
    </div> 
    <div id="metaDataArea"> 
     <label for="genre" class="label">Genre</label> 
     <div class="input"> 
      <select id="genre"> 
       <option value="fiction">Fiction</option> 
       <option value="nonfiction">Non-fiction</option> 
      </select> 
     </div> 
     <div class="input"> 
      <input type="checkbox" name="mediaType">Hardback 
      <input type="checkbox" name="mediaType">Paperback 
      <input type="checkbox" name="mediaType">eBook 
     </div> 
    </div> 
</div> 

CSS：

#parent { 
    width: 550px; 
    border: 1px dotted #777; 
    overflow: hidden; 
} 

.label { 
    background-color: #ccc; 
    border: 1px solid #333; 
    float: left; 
    margin: 4px; 
    padding: 2px; 
    width: 20%; 
    text-align: left; 
} 

.input { 
    background-color: #e1e1e1; 
    float: left; 
    margin: 4px; 
    padding: 2px; 
    width: 70%; 
} 

謝謝！

Answer 1

我繼續爲此工作並找到了解決方案。我爲每個表單組創建了一個容器div，並將其設置爲顯示：table-row。然後在表單標籤和表單控件上，我設置了display：table-cell。這允許表單像表格一樣工作，但仍然使用現代CSS和div結構。

因此，這將是這樣的：

<div id="titleArea" style="display: table-row;"> 
<label for="name" class="label" style="display: table-cell;">Name</label> 
<div class="input" style="display: table-cell;"> 
    <input id="name" type="text" /> 
</div>