兩種形式的列布局，提交按鈕之間對齊

Question

我想用HTML + CSS創建兩列布局來顯示兩個並行的表單。我希望表單的輸入字段在每列中自然流動，除了兩個提交按鈕之外，當它們彼此不在同一高度時它們看起來很糟糕。

我已經嘗試了一些不同的技術，但沒有成功：

HTML表格的工作創造的佈局，但因爲元素由行邏輯分組，它是不可能有這包括每列單獨的形式。 （其中一列有文件上傳，所以一個大的形式是不可行的）。

由於類似的原因，CSS表格不好。

分別使用帶「float：left」和「float：right」的div可用於佈局，對於將兩種形式分組非常好。但是，提交按鈕（這是div的最後一個元素）處於不同的高度。我想將較高的按鈕向下移動到較低按鈕的高度，以便它們垂直對齊。然而，我似乎無法想出任何辦法來做到這一點，因爲他們是兩個兄弟姐妹，所以他們並沒有「意識到」彼此的高度。

這裏是基於浮動的實現的示例的jsfiddle：http://jsfiddle.net/53nvqrfr/

<div style="float: left; width:50%"> 
    <form> 
     <table> 
      <tr> 
       <td> 
        <input type=" text " /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <input type=" text " /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <button type="submit ">submit</button> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div> 
<div style="float:right; width:50%"> 
    <form> 
     <table> 
      <tr> 
       <td> 
        <input type=" text " /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <button type="submit ">submit</button> 
       </td> 
      </tr> 
     </table> 
    </form> 
</div> 
</div> 

Answer 1

您可以使用自舉這樣bootply，如果你想全寬剛從容器更改類名容器流體。

Answer 2

您可以向第二個表添加一個空行。這可能是一種黑客攻擊，但它起作用。