收缩或膨胀利润率有窗调整大小

这是我一直在摆弄的代码：http://jsfiddle.net/denWG/3/收缩或膨胀利润率有窗调整大小

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

#container 
{ 
    width: 90%; 

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

理想情况下，我想让绿色框在容器的右侧墙上开始。随着窗口缩小，它会将右边框靠近左边框。我想要绿色框具有这种行为。随着窗口缩小，我需要右边框将绿色盒子推向红色盒子。

两个盒子都是display: inline-block;。

最初，我想将margin-right: some%;添加到红色框中，但是这并不像我想的那样工作。

最后，我想要一个红色和绿色框的网格。我正确地处理这个问题吗？有什么建议？太感谢了！

来源

2013-04-05 425nesp

这样的事情？ http://jsfiddle.net/denWG/4/ – 2013-04-05 10:29:09

头脑风暴...是的！ – 425nesp 2013-04-05 10:34:34

我注意到你还加了'min-width：280px'。我以前遇到过这个属性，但是我似乎无法把它包裹起来。你能解释一下吗？或者把我指向一篇文章或什么？谢谢。您。 – 425nesp 2013-04-05 10:37:16

我改变了下面的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

来源

2013-04-05 10:36:40

收缩或膨胀利润率有窗调整大小

回答

相关问题