divを反応的にするにはどうすればいいですか？

Question

こんにちは私は私のdivの反応に問題があります。私は、ウィンドウのサイズを変更するときに、これらの2つのイメージが1つ下のものになることを望みます。私はスクリーンショットを作ったので、あなたが望むものを正確に見ることができます。私は自分の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に準拠しているかどうかはわからない。しかし、このフィドルはあなたが必要とするものをします。

https://jsfiddle.net/p4d9ueeL/

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

ジャスト（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の幅を制限しました。スニペットをフルサイズで展開すると、横に並べて表示されます。

.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; 
 
}

<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>