html - 2 表格的并排浮动

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

这可行，但我希望正确的形式粘在右侧。正如您在我的图像中看到的那样，它有很多空间。当我放 text-align: right; 在那里，我的文字只停留在表格上。但表格不想离开。

图片：

Answer 1

您可以简单地为您的右手表格设置一个特定的宽度，如下所示：

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

这是一个小提琴：

http://jsfiddle.net/CcZXk/

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

Answer 2

.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 3

实际上它工作正常，因为它有50% 的 width。

改变它像素/自动

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

检查这个JSFiddle

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