Css 使DIV成为图像的一部分，或者如何将两个DIV相邻放置并自动将它们放置在彼此下方

我正在尝试创建一个div，它是图像的一部分。如果要移动图像，它将自动移动（例如，浏览器大小变小，图像将移动。div将跟随图像）。然而，我不知道该怎么做。我尝试了以下方法：

<div class="wrapper">
    <img src="2.jpg">
    <img src="1.jpg">
    <div class="play1" style="position:absolute; top:100px; left:100px">Content</div>
</div>

内容

注意：包装器的位置样式为“相对”

我想：若这是不可能的，我可以创建两个以图像为背景的div。因此，每个图像都有自己的div。但是，如果浏览器变小，我如何将这两个div相邻放置，并使它们“分开”。我知道如何将两个div相邻放置，但如何使浏览器变小时，第二个图像移动到第一个图像下方

---

离题选民的附言：我没有第二个问题的代码，因为我完全不知道我会怎么做。我可以在两个div相邻的位置粘贴一段代码，但仅此而已。

float

非常适合这样做。对于所讨论的每个div，为其指定样式

float:left

（假设您希望第一个向左排列）或

float:right（如果您希望第一个对齐到右侧）。div通常会并排放置，但如果两者不匹配，则第二个div会被撞倒。
此处：

CSS:

 @media all and (max-width:500px){
         #sidebar, #content { float:none; width:100%; }
  }

当屏幕（浏览器）大小达到500px或更低时，首先使其浮动。他们将切换到上面的css，从而将一个css堆叠在另一个css之上。
在Ed Cottrell的帮助下，我完全做到了我想要的。为了将两个div相邻放置，我使用

display: inline-block;

在cssIt works中使用媒体查询，谢谢。但是，它似乎不再像父级定义的那样居中了（边距：自动；位置：相对；顶部：100px；右侧：0；底部：0；左侧：0；文本对齐：居中；溢出：隐藏；），还有，我如何在两个div之间添加一点空间？您上面发布的代码中没有任何居中，所以我不确定你想把什么放在中心。如果你可以发布额外的代码，我可能会在这方面帮助你。它可能很简单，只需将
div
s或
img
s（或任何内容）放入
容器中即可。@EdCottrell此父项在屏幕中居中显示以下代码。它在100px的顶部居中：
.parent{margin:auto；position:relative；top:100px；right:0；bottom:0；left:0；text align:center；overflow:hidden；}
.image1{background image:url（'1.jpg'）；宽度：200px；高度：200px；float:left；}.image2{background image:url（'2.jpg'））；宽度：200x；高度：200px；float:left；}
只需使用此HTML而不是现有的HTML（但保留CSS）：
@EdCottrell似乎不起作用。它似乎确实适用于文本