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>

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

我想：如果这是不可能的，我可以用图像作为背景创建两个div。所以，每张图片都有自己的div。但是，我如何将这两个div放在彼此旁边，如果浏览器变小则将它们“拆分”。我知道如何将两个div放在一起，但是如果浏览器变小，第二个图像将移动到第一个图像下面，我怎么能这样做呢。

p / s对于非主题选民：我的第二个问题没有一段代码，因为我完全不知道如何做到这一点。我可以粘贴一段代码，其中两个div彼此相邻，但这就是全部。

Answer 1

float非常适合这一点。对于有问题的每个div，请为其指定样式float:left;（假设您希望第一个对齐到左侧）或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。他们将切换到css之上，从而堆叠在一起。

Answer 3

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

display: inline-block;

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

3 个答案: