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

演示

或者将您的浮动元素包装在 a 中div并使用overflow: hidden;

演示 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;
}

有关清除浮动的更多信息，请阅读我的这个答案

Answer 2

使用花车后需要清除。我已经更新了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>