如何讓這些div在標題上正確顯示？

Question

我試圖制定出一套與下方的首部水平排列的div，但它的出現如下：

這是的jsfiddle：http://jsfiddle.net/4cTSK/

什麼我需要是否讓div出現在頭部，如下所示？

<div class="horizontal-div-container even-spacing-signature"> 
    <div> 
     <span>Signed by the Client: ______________________ </span> 
    </div> 

    <div> 
     <span>Signed by the Engineer: _____________________</span> 
    </div> 
</div> 

<div class="horizontal-div-container even-spacing-signature"> 
    <div> 
     <span>Date: ______________________ </span> 
    </div> 

    <div> 
     <span>Date: _____________________</span> 
    </div> 
</div> 

<h1> 
    Appendix 3, Client Information 
</h1> 


h1 { 
    background: #000096; 
    color: #FFF;     
    text-align: center; 
    font-weight: bold; 
    font-size: 1em; 
} 

.horizontal-div-container div { 
    float: left; 
    clear: none; 
} 

.even-spacing-signature div 
{ 
    font-weight: bold; 
    width: 50%; 
} 

Answer 1

你需要清除您使用花車後。我已更新JSFiddle以使用'micro clearfix hack'。請參見下面的代碼：

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

.cf:after { 
    clear: both; 
} 

然後換你的兩個漂浮在一個div與.cf類：

<div class="cf"> 
    <div class="horizontal-div-container even-spacing-signature"> 
     <div> 
      <span>Signed by the Client: ______________________ </span> 
     </div> 

     <div> 
      <span>Signed by the Engineer: _____________________</span> 
     </div> 
    </div> 

    <div class="horizontal-div-container even-spacing-signature"> 
     <div> 
      <span>Date: ______________________ </span> 
     </div> 

     <div> 
      <span>Date: _____________________</span> 
     </div> 
    </div> 
</div> 

Answer 2

你需要使用clear: both;

Demo

來清除浮動元素或者一個包裹裏面div你的浮動元素，並使用overflow: hidden;

Demo 2

<div class="wrapper"> 
<div class="horizontal-div-container even-spacing-signature"> 
    <div> 
     <span>Signed by the Client: ______________________ </span> 
    </div> 

    <div> 
     <span>Signed by the Engineer: _____________________</span> 
    </div> 
</div> 

<div class="horizontal-div-container even-spacing-signature"> 
    <div> 
     <span>Date: ______________________ </span> 
    </div> 

    <div> 
     <span>Date: _____________________</span> 
    </div> 
</div> 
</div> 
<h1> 
    Appendix 3, Client Information 
</h1> 

.wrapper { 
    overflow: hidden; 
} 

有關清除漂浮更多信息，請閱讀this回答我的