DIV在居中的div旁边

Question

body {
    background: rgba(0, 0, 0, 0.8);
    font-family: sans-serif;
    font-size: 11px;
    color: #e0e0e0;
}

#wrapper {

}

#login {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.9);
    width: 360px;
    padding: 20px;
    position: relative;

    -webkit-border-radius: 15px;
    border-radius: 15px;
}


#registercontainer {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 1050px;
}

#register {
    position: absolute;
    left: 740px;
    top: 50px;
}

//

    <div id="wrapper">
        <div id="login">
            <h2>Login to The Something Project</h2>
            <form action="game" method="post">
                <input type="text" name="username" maxlength="20" placeholder="username"><br>
                <input type="text" name="usericon" placeholder="http://imgur.com/icon.png"><br>
                <br>
                <input type="submit" value="login">
            </form>
        </div>


        <div id="registercontainer">
            <div id="register">
                <h2>Register for The Something Project</h2>
            </div>
        </div>
    </div>

我想在居中的div旁边有一个div（见上图），但我得到的是这个。 http://i.imgur.com/X0e4s.png

我该如何解决这个问题？

问候

Answer 1

我想你可以采取很多方法。 这是一个。

使用与示例中相同的HTML结构，可以实现目标：

• 创建除主包装inline-block之外的所有元素。
• 通过将text-align: center赋予主包装器来居中“居中”元素。
• 将侧边栏放在文档流程之外，给它position: absolute 。 这要求您给出其容器position: relative 。
• 给侧边栏的容器零宽度和高度，使其不影响居中计算。 给它vertical-align: top ，使其顶边（也就是侧边栏的顶边）与居中元素的顶边对齐。
• 如果您不希望其内容在其自身中居中，则可以选择为居中元素和侧边栏指定text-align 。

作为奖励，通过这种方法，您可以在一个位置直接指定居中div和侧边栏的宽度。

看到它在行动 。

Answer 2

请检查修复后的JSFiddle标记。

您需要删除#registercontainer并将#register放入#login以及根据居中的块宽度进行一些位置修改。

HTML：

<div id="wrapper">
    <div id="login">
        <h2>Login to The Something Project</h2>
        <form action="game" method="post">
            <input type="text" name="username" maxlength="20" placeholder="username"><br>
            <input type="text" name="usericon" placeholder="http://imgur.com/icon.png"><br>
            <br>
            <input type="submit" value="login">
        </form>
        <div id="register">
            <h2>Register for The Something Project</h2>
        </div>
    </div>
</div>​

和CSS：

body {
    background: rgba(0, 0, 0, 0.8);
    font-family: sans-serif;
    font-size: 11px;
    color: #e0e0e0;
}

#login {
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.9);
    width: 360px;
    padding: 20px;
    position: relative;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

#register {
    position: absolute;
    left: 420px;
    top: 20px;
    width: 100px;
}​

Answer 3

看看这个小提琴。 http://jsfiddle.net/nUk77/或者更接近原始代码： http ： //jsfiddle.net/rSbzT/

寄存器div不是绝对定位而是定位其容器。 绝对定位使它从html流程中脱离，因此它不会干扰margin-right：auto;

Answer 4

float: right应该解决你的问题。 记得添加一个带有float:clear的空div容器float:clear之后float:clear 。

Answer 5

这里有几件事情 - 首先，你在“registercontainer”div上的宽度是1050 - 这会强制它清除，导致“register”div出现在'居中'div下面。

我会采取不同的方式。 如果你正在处理一个固定宽度的站点：我会将＃login和#registercontainer浮动在一起，并给#wrapper一个明确的宽度。 然后，设置#wrapper以使用％来保留边距，该％将近似于您所追踪的位置。

请参阅此JS Fiddle以获取示例 。 这是CSS（我为了清晰起见改变了背景颜色）：

body {
    background: rgba(0, 0, 0, 0.8);
    font-family: sans-serif;
    font-size: 11px;
    color: #e0e0e0;
    width: 960px;
}

#wrapper {
   width: 760px;
    background: blue;
    overflow: hidden;
    margin-left: 35%;
}

#login {
    float: left;
    margin-top: 50px;
    background: rgba(0, 0, 0, 0.9);
    width: 360px;
    padding: 20px;


    -webkit-border-radius: 15px;
    border-radius: 15px;
}


#registercontainer {
    float:left;
    margin-top: 50px;
    clear: none;
    width: 350px;
    background: red;
}

#register {

}​

Answer 6

尝试这个：

    <div style="position: relative; display: inline-block; padding: 0 30px;">
    <h2>CENTERED ELEMENT</h2>
        <div style="position: absolute; top: 0; left: 100%;">
            ELEMENT NEXT TO CENTERED DIV
    </div>

绝对使用100％的位置。 并使用填充中心元素进一步推动侧面div。