html - 居中 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 结构，可以实现目标：

• 制作除 main wrapper 之外的所有元素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应该可以解决您的问题。记得在之后添加一个空的 div 容器float:clear。

Answer 5

这里发生了几件事——首先，“registercontainer”div 上的宽度为 1050——这将强制它清除，导致“register”div 出现在“centered”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。