帶圖像格式的單選按鈕

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，但無論如何你最好嘗試，保持它，如果想幫助我隨時聯繫，