layout - 缩小或扩展页边距的边距

这是我一直在摆弄的代码：http://jsfiddle.net/denWG/3/

首先，您需要扩展包含HTML和CSS的右列。注意灰色容器如何扩展和收缩到可用宽度的90％。

#container
{
    width: 90%;

    margin: 16px auto;
    /* More rules... */
}

理想情况下，我希望绿色框从容器的右壁开始。随着窗口的缩小，它会将右侧边框推向左侧边框。我希望绿色框具有此行为。随着窗口的缩小，我希望右边框将绿色框推向红色框。

两个框都是display: inline-block;。

最初，我想到了在红色框中添加margin-right: some%;的方法，但这并没有像我想象的那样起作用。

最终，我想要一个红色和绿色框的网格。我正确地解决了吗？有什么建议吗？太感谢了！

最佳答案

我更改了以下CSS：

    #container {
        width: 90%;
        margin: 16px auto;
        padding: 16px;
        position:relative;  /* added */
        border: solid 1px #333;
        background-color: #eee;
        min-width: 280px;
    }

    #greenBox {
        width: 128px;
        height: 128px;
        position:absolute;  /* added */
        top:16px;
        right:16px;
        background-color: green;
    }

Working fiddle

关于layout - 缩小或扩展页边距的边距，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15831423/