css - 如何使用CSS并排放置两个div

Question

我的页面上有两个 div，我想并排显示它们。我试过使用 float:left 和 display:inline-block，但它不起作用。

有人可以帮忙吗？这是我的页面的样子 fiddle

Answer 1

使用<p>或 <h3>并设置它 inline-block也，重置white-space对于 #maincontent及其内部内容:

http://jsfiddle.net/ATdkE/15/

div#login, div#register, #maincontent > h3 {
    white-space:normal;/* reset to normal */
    display:inline-block;
}
div#login, div#register {
    background: linear-gradient(top, #fff, #f8f8f8);
    border: 1px solid #d0d2d5;
    border-bottom: 1px solid #bebfc2;
    border-radius: 4px;
    margin: 0px 0 10px 0;
    padding: 30px;
    width: 212px;
    vertical-align:top;
}
#maincontent {
    white-space:nowrap;/* keep all inline element on one single line */
    text-align:center;/* no need of obsolete attribute in HTML markup :) */
}

您可以添加一些边距并更改 vertical-align http://jsfiddle.net/ATdkE/17/