使用窗口调整大小缩小或扩展边距

时间:2013-04-05 10:20:15

标签: layout margin css

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

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

#container
{
    width: 90%;

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

理想情况下,我希望绿色盒子从容器的右壁开始。随着窗口缩小,它会将右边框推向靠近左边框的位置。我希望绿色框有这种行为。当窗口缩小时,我希望右边框将绿色框推向红色框。

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

最初,我想过将margin-right: some%;添加到红色框中,但这并不像我想象的那样有效。

最终,我想要一个红色和绿色方框。我接近这个吗?有什么建议?万分感谢!

1 个答案:

答案 0 :(得分:1)

我更改了以下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