带有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/

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

Answer 1

这是你想要完成的吗? 工作演示

可以将float: left;添加到#userlogin和#headlinediv中:

#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 */
}

如果你有"body"不被使用的问题，正如你提到的，你可能想把这个"login"区域包装在包装器中，像这样:

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

:

#logincontainer { height: 220px; }

Answer 2

你需要浮动#headerline和#userlogindiv，否则你看到的是预期的行为。

尝试添加

float: left;

到#headlinediv

Answer 3

您需要在您想要并排的部分中添加float left。看看这个http://jsfiddle.net/danielcgold/aD2yH/

Answer 4

您可以将float:left;添加到您的两个div中

示例:http://jsfiddle.net/jasongennaro/JRumr/

你也可以使用display:inline-block;

第二个例子:http://jsfiddle.net/jasongennaro/JRumr/1/

Answer 5

几件事。首先#container标签永远不会结束，关闭它。

第二，你需要浮动你的两列:

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