Question

enter image description here

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和侧边栏的宽度。

See it in action

Answer 2

请检查标记的修复 JSFiddle 。

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

Result

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容器。

Answer 5

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

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

见JS Fiddle for an example。这是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。

DIV在居中的div旁边

6 个答案: