兩個嵌套的div並排

Question

我知道這已經被問了一百萬遍了，但是我似乎無法破解它，而且我相信更有經驗的人可以比我更快地發現我的錯誤。

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

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

我希望右側框位於表格的右側，但位於容器內，以便其右側與導航欄的右側對齊。

首先十分感謝。

Answer 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的絕對定位子代將相對於此div定位。
2. 使顯示：行內塊; 左邊和右邊的塊，所以它占用必要的寬度，並且彼此之間不清除也不重疊。 如果設置寬度，則沒有必要。
3. 將右側位置右移至0，將左側位置左移0。

更新

我現在認為最好的方法是觸發塊格式化上下文 。 使#left向左和#left浮動，賦予其#right overflow:auto; 或任何其他不同於可見的內容。 在IE6中，您需要觸發一個稱為hasLayout的東西，因此將正確的#right zoom:1;賦予#right zoom:1; 。