0

これは何百万回も質問されたことがあることは知っていますが、それを解読することはできないようです。経験豊富な誰かが、私が解決するよりもはるかに早く私の間違いを見つけることができると確信しています。

HTML：http ://sas98.user.srcf.net/guestbuzz/index.php

CSS：http ://sas98.user.srcf.net/guestbuzz/style.css

右側のボックスをフォームの右側に配置しますが、コンテナ内に配置して、右側がナビゲーションバーの右側に揃うようにします。

よろしくお願いします。

4

1 に答える 1

1

divのブロックモデルを理解します。それは利用可能な全幅を取ります。これは機能します：

.container {
    width: 1000px;
    margin: 0px auto;
    /*display:table;*/
    position:relative;
}

    #left {
        width: 600px;
        display:inline-block;
        /*float:left;*/
        position:absolute;
        left:0;
    }

    #right {
    background-color:rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
           -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
             -o-box-shadow: 0 0 10px rgba(0,0,0,0.1);
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
        width: 400px;
        border-radius: 3px;
        display:inline-block;
        /*float:right;*/
        position:absolute;
        right:0;
    }

コメント行は、機能する別の方法であることに注意してください。

私は何をしましたか？

  1. コンテナを相対的にするので、このdivの絶対位置の子は、これに対して相対位置になります。
  2. display：inline-block;を作成します 左右のブロックなので、必要な幅を取り、クリアしたり、重なり合ったりしないでください。幅を設定する場合、これは必要ありません。
  3. 右の位置を右に0にし、左の位置を左に0にします。

アップデート

私は今、最善のアプローチはブロックフォーマットコンテキストをトリガーすることだと思います。フロート#leftを左に#right作成し、プロパティoverflow:auto;または表示されているものとは異なるものを指定します。#rightIE6では、hasLayoutと呼ばれるものをトリガーする必要があるため、プロパティに与えzoom:1;ます。

于 2012-06-01T22:18:09.437 に答える