html - 2 表格并排 float

Question

所以我有 2 个表单，在同一页面上注册和登录。现在我正在设计我的表单/布局，并希望这两个表单都很好并排。

从现在开始我就用这个:

HTML:

<div class="links">
    <h2>Register</h2>
    <?php include ("register.php");?>
</div>

<div class="rechts">
    <h2>Login</h2>
    <?php include ("login.php");?>
</div>

<div class="clearfix"></div>

CSS:

.links{
    float: left;
    width:50%
}
.rechts{
    float: right;
    width: 50%;
}

这可行，但我希望正确的表单粘在右侧。正如你在我的图片中看到的，它有很多空间。当我放置文本对齐:右；在那里，我的文字只遵循形式。但表单不想搁置。

图片:

Answer 1

您可以简单地为右 watch 单设置特定宽度，如下所示:

.rechts{
    float: right;
    width: 300px;
}

这是一个 fiddle :

http://jsfiddle.net/CcZXk/

或者，如果您完全删除右侧 div 上的 width:50%;，它可能会正常工作。然而，这取决于该 div 的内容。 ( float 元素的工作方式有点像内联元素，因为它们尝试尽可能小，同时仍然包含其所有内容。换句话说，如果 div 内有很长的文本行或很长的图像或输入字段，删除 width:50%; 不起作用，因为 div 会太宽并换行到下一行。)