如何让这些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

您需要使用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回答

Answer 2

使用花车后需要清除。我已更新JSFiddle以使用'micro clearfix hack'。请参阅以下代码：

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

.cf:after {
    clear: both;
}

然后用.cf类将你的两个花车包裹在一个div中：

<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>