显示内联块，将最终元素推送到其他元素下方

Question

HTML：

<div id='Content'>
<div>
    <div>
        <pre>SOME TEXT</pre>
        <div id='map1' style='width:450px;height:350px;'></div>
    </div>
    <div>
        <pre>SOME TEXT</pre>
        <div id='map2' style='width:450px;height:350px;margin-left:-17px;'></div>
    </div>
</div>
<div style='width:300px;'>
    <h1>Contact Us</h1><br>
    <form action="/Account/Contact" onsubmit="return SubmitMessageForm(this,event,this.childNodes[1]);" method="post">
        <pre style="display:none;"></pre>
        <label>
            <span>Person To Email</span>
            <select name='ToContact' id='ToContact'>
                <option value='0'>Mark</option>
                <option value='1'>Paul</option>
            </select>
        </label>
        <label>
            <span>Name</span>
            <input type="text" id="Name" name="Name"/>
        </label><br>
        <label>
            <span>Your Email</span>
            <input type="email" id="Email" name="Email"/>
        </label><br>
        <label>
            <span>Message</span>
            <textarea name="Message" rows="8" id="Message"></textarea>
        </label><br>
        <label><input style='width:50px;' type="submit" value="Send"/></label>
    </form>
</div>
</div>

CSS：

body > div#Content {
    text-align:center;
    white-space:nowrap;
}
body >div#Content >div {
    display:inline-block;
}
    body >div#Content >div >div {

    }
        body >div#Content >div >div >pre {
            line-height:20px;
            margin-right:50px;
        }
        body >div#Content >div >div >div {
            display:inline-block;
        }
        body >div#Content >div >div >h1 {
            font-size:20px;
        }
        body >div#Content >div >form {
            width:100%;
        }
            body >div#Content >div >form >label {
                float:left;
            }
                body >div#Content >div >form >label >span {
                    float:left;
                }
                body >div#Content >div >form >label >input, body >div#Content >div >form >label >textarea, body >div#Content >div >form >label >select {
                    width:300px;
                    float:left;
                }

我试图并排显示两个div元素，但由于某种原因，第二个div被推下约500px。如何将这两个元素并排放置，同时在父div的中心对齐？当我尝试删除display：inline-block并添加float left时，它不会居中

Answer 1

在内联元素上设置vertical-align:top;。这应该并排呈现

另外，您发布的代码不会验证.. http://jsfiddle.net/wJtmq/