如何让div响应？

Question

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

.gender-selector input {
  -webkit-appearance: none;
  -moz-appearance: button;
  appearance: button;
  margin: 0;
  padding: 0;
}
.women {
  position: relative;
  left: 100px;
}
.man {
  position: relative;
  left: 210px;
}

<div class="gender-selector">
  
  <label>
    <input class="gender" type="radio" name="gender" value="w" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="180px" height="180px" class="women">
  </label>

  <label>
    <input class="gender" type="radio" name="gender" value="m" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" width="180px" height="180px" class="man">
  </label>

</div>

Answer 1

我认为您的问题是如何尝试定位图像。我不得不承认我没有看到包含元素但是文本的标签，不确定它是否符合w3标准。但是这个小提琴可以满足你的需要。

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

https://jsfiddle.net/p4d9ueeL/

只需缩小右侧面板（显示html的位置），您就可以看到效果。

此致

Answer 2

我会做的是这样的事情。将<labels>换成<div>，你的css会是这样的：

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

我很确定应该让您接近所寻找的东西，您可能需要调整最大宽度以使其完美满足您的需求。

Answer 3

有几种方法可以实现这一目标。以下示例使用labels在彼此旁边显示display:inline-block（蓝色边框）。然后当它们的容器.gender-selector（红色边框）太窄而无法彼此贴合时，它们会将一个包裹在另一个之下。

在此演示中，我限制了.gender-selector的宽度以显示效果。展开整个片段，看它们是否并排放置。

＆＃13;

＆＃13;

.gender-selector input {
  -webkit-appearance: none;
  -moz-appearance: button;
  appearance: button;
  margin: 0;
  padding: 0;
}

.gender-selector {
  border:1px solid red;
  max-width:60%; 
  min-width:220px;
  margin:auto;
  text-align:center;
}
.gender-selector label {
  display:inline-block;
  position:relative;
  border:1px solid blue;
}
.gender-selector label img {
  padding:40px;
}

＆＃13;

<div class="gender-selector">
  <label>
    <input class="gender" type="radio" name="gender" value="w" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/female1-512.png" width="180px" height="180px" class="women">
  </label><!-- no whitespace here
--><label>
    <input class="gender" type="radio" name="gender" value="m" onclick="processPhase1()" />
    <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-512.png" width="180px" height="180px" class="man">
  </label>

</div>

＆＃13;

＆＃13;

＆＃13;