这是我的HTML代码
这是我的css代码
#container{ width: 400px; height: 400px; background-color: red; margin: 0 auto; } #topright{ width: 50px; height: 50px; background-color: black; position: relative; top:0px; right:0px; } #topleft{ width: 50px; height: 50px; background-color: black; position:relative; top:0px; left:350px; } #bottomright{ width: 50px; height: 50px; background-color: black; position: relative; top:250px; right:0px; } #bottomleft{ width: 50px; height: 50px; background-color: black; position:relative; top:250px; left:350px; }
这是输出 http://s23.postimg.org/dhgy9mpq3/image.png
我需要获得的是,所有4个黑色方块都位于红色方块的角落,就像在这张图片中一样,我应该更改或添加代码?THX http://postimg.org/image/r5kv15l5v/
添加position:relative
到#container
和position:absolute
到内部的div.
您可以将常用属性与逗号结合使用,例如
#bottomright,#bottomleft{css properties}
CSS:
#container { position: relative; } #container > div { width: 50px; height: 50px; background-color: black; position: absolute; } #bottomright, #bottomleft { bottom:0; } #topright, #topleft { top:0; } #bottomleft, #topleft { left:0; } #bottomright, #topright { right:0; }
DEMO在这里.