Html 如何使div具有响应性？

你好，我有一个问题与我的div的响应。我想这两个图像时，调整窗口的大小去下面的另一个。我已经做了一个截图，所以你可以看到我想要的。我不明白我的css代码出了什么问题。希望你能帮助我

.性别选择器输入{ -webkit外观：无； -moz外观：按钮； 外观：按钮； 保证金：0； 填充：0； } .妇女{ 位置：相对位置； 左：100px； } 先生{ 位置：相对位置； 左：210像素； }

---

我认为你的问题在于如何定位图像。我必须承认，我没有看到一个包含元素但包含文本的标签，不确定它是否符合w3。但这把小提琴能满足你的需要

.women {
  position: relative;
  left: 100px; // this may be the issue
}

只需缩小显示html的右侧面板，就可以看到效果

---

关于

我会这样做。将您的css包装到中，您的css将如下所示：

.gender-selector div {
  max-width: 350px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
.gender-selector div img {
  width: 100%;
  height: auto;
}

---

我敢肯定，这会让你接近你想要的，你可能需要调整最大宽度，使其完美地满足你的需要。

有几种方法可以实现这一点。下面的示例中，我们使用display:inline block将标签的蓝色边框显示在彼此旁边。当他们的容器被打开时，他们会把一个包裹在另一个下面。红色的边框太窄，他们无法并排放置

在这个演示中，我限制了.gender选择器的宽度以显示效果。将代码段展开为全尺寸，以查看它们是否并排匹配

.性别选择器输入{ -webkit外观：无； -moz外观：按钮； 外观：按钮； 保证金：0； 填充：0； } .性别选择器{ 边框：1px纯红； 最大宽度：60%； 最小宽度：220px； 保证金：自动； 文本对齐：居中； } .性别选择器标签{ 显示：内联块； 位置：相对位置； 边框：1px纯蓝色； } .性别选择器标签img{ 填充：40px； }

---

... 从那里，您可以使用对齐和边距来居中显示内容。如果你需要帮助的话，我也可以帮你。我已经试过了，但是我想要两张图片之间有一定的距离，我怎么能在这里。。。检查我在css上的注释。