Html CSS：在 Div 中定位图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10720801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Positioning images in a Div
提问by Matthew Lancaster
I'm looking to position images over top of a div which has a set background. I'm using CSS to style the div as well as the images sitting on top of the background but I'm not seeing the results that I'd expect. The images which are sitting on top of the div's background image does not adjust based on my pixel settings.
我希望将图像放置在具有设置背景的 div 之上。我正在使用 CSS 为 div 以及位于背景顶部的图像设置样式，但我没有看到我期望的结果。位于 div 背景图像顶部的图像不会根据我的像素设置进行调整。
Here's my HTML:
这是我的 HTML：
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected" />
<img src="images/color_C.png" class="c_image" />
<img src="images/color_K.png" class="k_image" />
<img src="images/color_M.png" class="m_image" />
<img src="images/color_Y.png" class="y_image" />
</div>
Here's my CSS:
这是我的 CSS：
#colorpicker{
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{
top: 50px;
right: 25px;
}
回答by paddotk
I can't make up from your question how exactly you want to position those four images, but I would make a selector for your images and not the parent div:
我无法从你的问题中弥补你想要如何定位这四个图像，但我会为你的图像而不是父 div 制作一个选择器：
html:
html：
<div class="colorpicker" id="colorpicker">
<img src="images/color_unselected.png" class="unselected">
<img src="images/color_C.png" id="c_image" class="image" />
<img src="images/color_K.png" id="k_image" class="image" />
<img src="images/color_M.png" id="m_image" class="image" />
<img src="images/color_Y.png" id="y_image" class="image" />
</div>
css:
css：
img.image {
/*whatever you want to do here*/
}
#colorpicker {
border: 0px;
width: 63;
height: 342;
position: relative;
margin: 0px auto;
margin-left: 1002px;
background-image: url(images/color_tab_container.png);
background-repeat: no-repeat;
}
#colorpicker.unselected{ top: 50px; right: 25px; }
Sidenote: you can just type/copy-paste the code here, select in and press the above 'code sample' button. This will display it correctly as you see above (make sure you do this for html and css separately) :-)
旁注：您可以在此处键入/复制粘贴代码，选择并按上面的“代码示例”按钮。如上所示，这将正确显示它（确保分别对 html 和 css 执行此操作）:-)
回答by saluce
To get the images to "stack", with a margin between then, add the following CSS:
要使图像“堆叠”，并在两者之间留出边距，请添加以下 CSS：
#colorpicker img {
display: block;
margin-bottom: 2px;
}
See http://jsfiddle.net/KX5mS/for a working example.
有关工作示例，请参阅http://jsfiddle.net/KX5mS/。
