10

ここに画像の説明を入力してください 

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

どうすればこれを解決できますか？

ご挨拶

4

6 に答える 6

19

あなたがとることができるかなりの数のアプローチがあると思います。これが1つです。

例と同じ HTML 構造を使用すると、次のように目標を達成できます。

  • メイン ラッパー以外のすべての要素を作成しますinline-block。
  • text-align: centerメインラッパーに渡すことで、「中央揃え」要素を中央に配置します。
  • サイドバーに を付けて、サイドバーをドキュメント フローから外しposition: absoluteます。これには、コンテナも指定する必要がありますposition: relative。
  • サイドバーのコンテナの幅と高さをゼロにして、センタリングの計算に影響を与えないようにします。vertical-align: topその上端 (サイドバーの上端でもあります) が中央の要素の上端と揃うようにします。
  • text-alignコンテンツをそれら自体の中央に配置したくない場合は、必要に応じて中央揃えの要素とサイドバーを指定します。

おまけとして、このアプローチでは、中央の div とサイドバーの両方の幅を 1 か所で直接指定できます。

実際に見てください。

于 2012-07-11T13:45:34.280 に答える
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;
}​
于 2012-07-11T13:46:54.760 に答える
0

このフィドルを見てください。http://jsfiddle.net/nUk77/ または元のコードにさらに近い: http://jsfiddle.net/rSbzT/

レジスタ div を絶対配置する代わりに、コンテナを配置しました。絶対配置により、html フローから切り離されるため、margin-right:auto; に干渉しません。

于 2012-07-11T13:45:25.363 に答える
0

ここでいくつかのことが行われています。まず、「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 {

}​
于 2012-07-11T13:47:41.873 に答える
0

float: rightあなたの問題を解決するはずです。float:clear後で空の div-container を追加することを忘れないでください。

于 2012-07-11T13:46:32.300 に答える