2形式的并排浮动

Question

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

从现在开始，我正在使用它：

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%;
}

这是有效的，但我希望正确的形式在右侧是粘性的。正如你在我的图像中看到的那样，它有很多空间。当我把text-align：right;在那里，我的文字只是坚持形式。但表格不想放在一边。

图像：

Answer 1

您可以简单地为右手形式设置特定宽度，如下所示：

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

这是一个小提琴：

http://jsfiddle.net/CcZXk/

或者，如果您完全删除右侧div上的width:50%;，它可能会正常工作。然而，这取决于该div的内容。 （浮动元素有点像内联元素，因为它们尽可能地小，同时仍然包含它们的所有内容。换句话说，如果你在div中有一长行文本或一个长图像或输入字段，删除width:50%;将不起作用，因为div太宽并且包裹在下一行。）

Answer 2

实际上它的工作正确，因为它有 50％的宽度。

更改像素/自动

.links{
    width: auto;
    float: left;
}
.rechts{
    width: auto;
    float: right;
}

选中此JSFiddle

Answer 3

.rechts{
width:auto;
margin-right:0;
float:right;
overflow:hidden;
}

或.....

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

.rechts{
float: right;
width: 50%;
}
.inner{
float: right;
width:auto;
margin-right:0;
}

Answer 4

您也可以使用float，而不是使用display指令。您可以轻松地将媒体查询添加到样式表并将其更改回display: block，以避免在较小的屏幕尺寸上水平滚动。

请参阅http://jsfiddle.net/QnDte/

/* CSS */
 .register, 
.login {
    display: table-cell;
}
.register_and_login {
    display: table;
    margin: auto;
}

<!-- HTML -->
<div class="register_and_login">
    <div class="register">
        <h2>Register</h2>
        <?php include ( "register.php");?>
    </div>
    <div class="login">
        <h2>Login</h2>
        <?php include ( "login.php");?>
    </div>
</div>

Answer 5

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

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

CSS：

.mylinks{
    float: left;
    width:50%;
}
.rechts{
    float: left;
    width: 50%;
} 
.mainblock
{
    width: 1000px;
    margin:0px auto;
}