这是我一直在摆弄的代码: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;
}
关于layout - 通过调整窗口大小缩小或扩大边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15831423/