html - 画像フォーマット付きラジオボタン

Question

各行に3つの画像を配置し、それぞれの下にラジオボタンを配置しようとしています。私はフォームにあまり精通しておらず、画像がこのようにレンダリングされている理由を理解できません。誰かがこれを作成する方法について何か考えやアイデアがありますか？

/jess/design.html

編集：その一部を理解しました...フォームの幅に問題があります。誰かがそれを手伝うことができない場合、まだラジオボタンを下に置く方法を理解しようとしています。

Answer 1

各ラジオボタンをその画像とともに div 内に配置するだけでwidth: 100%、うまくいくはずです。

編集：ラジオを画像の右側に配置します。ラッピング div 内の画像に 100% 幅を追加し、ラッピング div の幅を必要な列数に必要な値に設定してみてください。 (2 列の場合は 50%)

Answer 2

div をネストし、適切なルールを適用します。

こちらをご覧ください：http://jsfiddle.net/SREMB/4/

html, body {
    width: 100%;
}

.row {
  text-align: center;
  width: 100%;
  display: inline-block;
  white-space: nowrap;
}

.cell {
  padding: 10px;
  display: inline-block;
  text-align: center;
}

img {
  border: 2px solid black;
}
​

HTML

<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>


<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>

<div class="row">

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/grey.gif"><br>
<input type="radio" name="bead" value="grey" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/ivory.gif"><br>
<input type="radio" name="bead" value="ivory" />
</div>

<div class="cell">
<img src="http://connorreaumond.com/jess/images/beads/mattsmoke.gif"><br>
<input type="radio" name="bead" value="mattsmoke" />
</div>
</div>

<br><br>

</p>

Answer 3

あなたはこれをすることができます、http://jsfiddle.net/ayBeh/

ID は同じページでオンタイムで使用することをお勧めします。そのため、"#bead" の代わりに .bead を使用してください。BRO と言って申し訳ありません。あなたのコードを見ましたが、あまりきれいではありません。クリーンアップの問題がたくさんあります。よく知らないと思います。 HTML でも、とにかく最善を尽くしました。それを続けてください。助けが必要な場合はいつでも私に連絡してください。