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

【问题标题】：Make a DIV part of an image, or how to place two divs next to each other and automatically put them below each other将 DIV 作为图像的一部分，或者如何将两个 div 彼此相邻放置并自动将它们放在彼此下方
【发布时间】：2013-12-17 03:57:40
【问题描述】：

我正在尝试创建一个作为图像一部分的 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 相邻的地方粘贴一段代码，仅此而已。

【问题讨论】：

在css中使用媒体查询

标签： css image html

【解决方案1】：

float 非常适合这个。对于每个有问题的 div，给它样式 float:left; （假设您希望第一个排列在左侧）或 float:right; （如果您希望第一个排列在右侧）。 div 通常会并排放置，但如果它们不适合，第二个会被撞倒。

【讨论】：

它有效，谢谢。但是，它似乎不再居中，因为它是父级定义的（边距：自动；位置：相对；上：100px；右：0；下：0；左：0；文本对齐：中心；溢出：隐藏；）另外，如何在两个 div 之间添加一点空间？
您在上面发布的代码中没有任何居中，所以我不确定您要居中的是什么。如果您可以发布其他代码，我可能会为您提供帮助。这可能就像将divs 或imgs（或其他）放在<div style="text-align:center"> 容器中一样简单。
@EdCottrell 这个父级在屏幕中居中，代码如下。它以 100px 的顶部为中心：.parent{ margin: auto; position: relative; top: 100px; right: 0; bottom: 0; left: 0; text-align: center; overflow:hidden; }<div class="parent"> <div class="image1"> </div> <div class="image2"> </div> </div>.image1{ background-image: url('1.jpg'); width: 200px; height: 200px; float: left; } .image2{ background-image: url('2.jpg'); width: 200x; height: 200px; float:left; }
只使用这个 HTML 而不是你所拥有的（但保留 CSS）：<div class="parent"> <div style="text-align:center"> <div class="image1"> </div> <div class="image2"> </div> </div> </div>。
@EdCottrell 似乎不起作用。它似乎确实适用于文本

【解决方案2】：

这里：http://jsfiddle.net/QNEmF/12/

CSS：

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

当屏幕（浏览器）大小达到 500 像素或更低时，首先将它们设为 float。他们将切换到 CSS 之上，因此一个层叠在另一个之上。

【讨论】：

【解决方案3】：

在 Ed Cottrell 的帮助下，我成功地完成了我想做的事情。为了将两个 div 放在一起，我使用了

display: inline-block;

【讨论】：