css - 两个并排嵌套的div

Question

我知道这个问题已经被问过一百万次了，但我似乎无法破解它，而且我相信更有经验的人会比我解决问题更快地发现我的错误。

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

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

我希望右侧框位于窗体的右侧但在容器内，因此它的右侧与导航栏的右侧对齐。

非常感谢。

Answer 1

了解 div 的 block 模型。它将占用整个可用宽度。这有效:

.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. 制作显示:内联 block ；左边和右边的 block ，因此它需要必要的宽度并且不会相互清除或重叠。 如果您设置了宽度，则不需要这样做。
3. 使右位置向右0，左位置0向左。

更新

我现在认为最好的方法是触发 block formatting context .使 #left 向左浮动并向 #right 赋予它属性 overflow:auto; 或任何其他不同于可见的属性。在 IE6 中，你需要触发一个叫做 hasLayout 的东西，所以给 #right 属性 zoom:1;。