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

这是您要完成的任务：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; }

Answer 2

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

尝试添加

float: left;

到#headline div

Answer 3

一些事情。首先#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; 
}

Answer 4

您需要将浮动左侧添加到您想要并排的部分。看看http://jsfiddle.net/danielcgold/aD2yH/

Answer 5

您只需将float:left;添加到您的两个div

即可

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

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

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

CSS和html的两列不起作用

5 个答案: