DIV next to centered div

问题

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>

I want to have a div next to the centered div (see the image above) but what i get instead is this. http://i.imgur.com/X0e4s.png

How do i solve this?

Greetings

回答1:

I imagine there are quite a few approaches you can take. Here is one.

Using the same HTML structure as in your example, the goal can be achieved thus:

Make all elements except the main wrapper inline-block.
Center the "centered" element by giving text-align: center to the main wrapper.
Put the sidebar out of the document flow by giving it position: absolute. This requires that you give its container position: relative as well.
Give the sidebar's container zero width and height so that it doesn't affect the centering calculations. Give it vertical-align: top so that its top edge (which is also the sidebar's top edge) aligns with the top edge of the centered element.
Optionally specify text-align for the centered element and the sidebar if you don't want their contents to be centered within themselves.

As a bonus, with this approach you can directly specify the widths for both the centered div and the sidebar in just one place.

See it in action.

回答2:

Please, check the repaired JSFiddle of your markup.

You need to remove #registercontainer and place #register into #login plus some position modifications according to centered block width.

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>

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

回答3:

float: right should solve your problem. remember to add an empty div-container with float:clear afterwards.

回答4:

There are a couple of things going on here - first, your width on the "registercontainer" div is 1050 - which will force it to clear, causing the "register" div to appear below the 'centered' div.

I would go about this a different way. If you are dealing with a fixed-width site: I would float #login and #registercontainer next to each other, and give #wrapper an explicit width. Then, set #wrapper to have a margin left using a % that would approximate the placement that you're after.

See this JS Fiddle for an example. Here is the CSS (I changed the background colors for clarity):

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 {

}

回答5:

Take a look at this fiddle. http://jsfiddle.net/nUk77/ Or even closer to your original code: http://jsfiddle.net/rSbzT/

Instead of absolute positioning the register div I positioned its container. The absolute positioning makes it break from the html flow so it doesn't interfere with the margin-right:auto;

回答6:

Try this:

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

Use 100% in position absolute. And use padding for the centered element to push the side div further.

来源：https://stackoverflow.com/questions/11433848/div-next-to-centered-div

标签

html

css

css3

css-float

positioning