使DIV成为图像的一部分，或者如何将两个DIV放在一起并自动将它们放在一起

Question

我正在尝试创建一个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>

注意：包装器具有"relative"作为位置样式

我想：如果这是不可能的，我可以创建两个以图像为背景的div。所以，每个图像都有自己的div。但是，如果浏览器变小，我该如何将这两个div放在一起，并使它们"拆分"呢。我知道如何将两个div放在一起，但如果浏览器变小，第二个图像将移动到第一个图像下方，我该怎么做呢。

p/s对于离题的选民：我没有第二个问题的代码，因为我完全不知道我会怎么做。我可以粘贴一段代码，其中两个div相邻，但仅此而已。

Answer 1

float非常适合这一点。对于每个有问题的div，为其指定样式float:left;（假设您希望第一个div向左排列）或float:right;（如果您希望第一个子div向右排列）。潜水器通常会并排放置，但如果两者都不合适，第二个潜水器会被撞倒。

Answer 2

此处：http://jsfiddle.net/QNEmF/12/

CSS:

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

当屏幕（浏览器）大小达到500px或更低时，首先将其设为float。它们将切换到over-css，从而一个堆叠在另一个之上。

Answer 3

在Ed Cottrell的帮助下，我做到了我想要的。为了将两个div放在一起，我使用了

display: inline-block;