收縮或膨脹利潤率有窗調整大小

這是我一直在擺弄的代碼：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

收縮或膨脹利潤率有窗調整大小

回答

相關問題