如何使用類將無表格HTML表單呈現爲帶有CSS的兩列？

Question

我試圖格式化兩列形式，使得：

• 的標籤上面的每個輸入字段或文本區域
• 一切類COL1是在左側
• 列一切都在類COL2是在右側
• 一切列類COL12跨越兩列

下面是HTML代碼，我需要這個一起工作：

<div id="contactForm"> 
     <form method="post" action=""> 
     <h3>Contact us</h3> 
     <p>To send us a work order, fill in the form below.<br /><strong>All the (*) fields are mandatory.</strong></p> 
     <fieldset> 
      <div class="col1"> 
      <label for="form_firstname">Firstname <span class="required">*</span></label> 
      <input type="text" id="form_firstname" name="form_firstname" value="" /> 
      </div> 
      <div class="col2"> 
      <label for="form_lastname">Lastname <span class="required">*</span></label> 
      <input type="text" id="form_lastname" name="form_lastname" value="" /> 
      </div> 
      <div class="col1"> 
      <label for="form_address">Address</label> 
      <input type="text" id="form_address" name="form_address" value="" /> 
      </div> 
      <div class="col2"> 
      <label for="form_city">City</label> 
      <input type="text" id="form_city" name="form_city" value="" /> 
      </div> 
      <div class="col1"> 
      <label for="form_email">Email <span class="required">*</span></label> 
      <input type="text" id="form_email" name="form_email" value="" /> 
      </div> 
      <div class="col2"> 
      <label for="form_phone">Phone <span class="required">*</span></label> 
      <input type="text" id="form_phone" name="form_phone" value="" /> 
      </div> 
      <div class="col12"> 
      <label for="form_attachment">Add Attachment <span class="form_attachment">*</span></label> 
      <textarea id="form_attachment" name="form_attachment" rows="5"></textarea> 
      </div> 
      <div class="col12"> 
      <label for="form_message">Message <span class="required">*</span></label> 
      <textarea id="form_message" name="form_message" rows="5"></textarea> 
      </div> 
      <div class="col12"> 
      <label for="form_message">Message <span class="required">*</span></label> 
      <input type="submit" value="Send" formnovalidate="formnovalidate" /> 
      </div> 
     </fieldset> 
     </form> 
    </div> 

如何爲需要我的代碼的CSS樣式這個HTML？

這是JSFiddle上的代碼。

Answer 1

試試這個CSS：

#contactForm{ 
    width: 80%; 
} 
label,.col1,.col2,.col12{display: block;} 
.col1{ float:right;} 
.col2{float:left;} 
.col12{clear:both;} 
textarea{ 
    display: block; 
    width: 100%; 
} 

http://jsfiddle.net/rx2gjpdw/3/