带图像格式的单选按钮

Question

我想在每一行下方都有三个图像，每个图标下方都有一个单选按钮。我对表单不太熟悉，我只是无法弄清楚为什么图像会以这种方式呈现出来。任何人有任何想法或任何想法如何创建？

/jess/design.html

编辑：想通了其中的一部分......问题上的表格的宽度。仍然试图找出如何获得下方的单选按钮，如果有人不能帮助。

Answer 1

只需将每个单选按钮的图像放在一个div中，并使用width: 100%就可以了。

编辑：没有等待，这将把无线电放在图像的右侧，也尝试100％的宽度添加到包装div内的图像，并设置包装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> 

Answer 3

你可以这一项，http://jsfiddle.net/ayBeh/

我建议你，ID应该在同一个页面上的时间使用，所以请使用.bead代替 “#bead”， 抱歉地说BRO，我看到你的代码，没有太多清洁，有很多清理问题， 我觉得你也不熟悉HTML，但无论如何你最好尝试，保持它，如果想帮助我随时联系，