css - 两个并排嵌套的 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浮动到左侧和 to #right，给它属性overflow:auto;或任何其他与可见不同的东西。在 IE6 中，您需要触发一个叫做 hasLayout 的东西，所以给#right属性zoom:1;。