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;
    }

请注意，注释行是另一种可行的方法。

我做了什么？。

使容器相对，所以这个div的绝对定位子，将相对于这个定位。
~~make display：inline-block;左侧和右侧的块，因此它需要宽度并且不清晰也不相互重叠。~~如果设置宽度，则不需要这样做。
将右侧位置设为0，左侧位置为0左侧。

<强>更新

我现在认为最好的方法是触发block formatting context。让#left浮动到左侧并移至#right，为其提供属性overflow:auto;或任何其他不同于可见的属性。在IE6中，您需要触发名为hasLayout的内容，以便将#right提供给属性zoom:1;。

两个嵌套的div并排

1 个答案: