html - 带有 CSS 和 html 的两列不起作用

Question

我试图并排放置一个新闻栏和一个登录栏，但实际情况是其中一个在另一个下方。

我已经设计好了页面的页眉和页脚，我只是在主要部分遇到了一些问题。这是我的代码。

CSS 代码:

@CHARSET "UTF-8";

#container {
    width: 900px;
    padding: 15px;
}

#headline {
    width: 575px;
    height: 220px;
    background-image: url('/images/background_news.png');
}

#headlinetext {
    padding: 20px;
    width: 280px
}

#userlogin {
    background-image: url('/images/area_login.png');
    width: 273px;
    height: 206px;
}

#logintext {
    padding: 20px;
    width: 273px
}

HTML代码:

<div id="container">
<div id="headline">
    <div id="headlinetext">
    <font size="4">Text</font>
    </div>
</div>

<div id="userlogin"> 
    <div id="logintext">
    <form method="post" action="validateuser.php">
    <label>Usu·rio: </label><br>
    <input type="text" name="username" maxlength="50" size="20" /><br>
    <label>Senha: </label><br>
    <input type="password" name="password" maxlength="50" size="20" /><br>
    </div>
</div>

我创建了一个 JsFiddle 来帮助可视化我的问题。 http://jsfiddle.net/cNqqJ/

container 标签重复是因为我有 3 个独立的 CSS 文件，不确定这是不是一个好借口。

Answer 1

这是您想要完成的吗:Working Demo

您可以将 float: left; 添加到 #userlogin 和 #headline div:

#userlogin 
{
    background-image: url('/images/area_login.png');
    width: 273px;
    height: 206px;
    float: left; /* Added */
}

#userlogin 
{
    background-image: url('/images/area_login.png');
    width: 273px;
    height: 206px;
    float: left; /* Added */
}

如果您遇到未使用“正文”的问题，如您所提到的，您可能希望将此“登录”区域包装在包装器中，如下所示:

<div id='logincontainer'>
    <div id='headline'>
    ...
    </div>
</div>

与:

#logincontainer { height: 220px; }