Кнопка радио с форматированием изображений

Question

Я пытаюсь иметь три изображения в каждой строке с помощью переключателя под каждым. Я не слишком хорошо знаком с формами, и я просто не могу понять, почему изображения обрабатываются таким образом. У кого-нибудь есть мысли или идеи о том, как это создать?

/jess/design.html

редактировать: выяснял часть этого ... проблема с шириной на формах. все еще пытаясь понять, как получить радиокнопку внизу, если кто-то не поможет в этом.

Answer 1

Просто поместите каждый переключатель со своим изображением внутри div с width: 100%, он должен сделать трюк.

РЕДАКТИРОВАТЬ: нет ожидания, который поместит радио в правую часть изображения, попробуйте также добавить 100% ширину изображения внутри оберточного div и установить ширину оберточного div на значение, которое вы хотите для номер столбца желаемого (50% для 2-х столбцов)

Answer 2

гнезда дивы и применять соответствующие правила:

Посмотрите здесь: 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, но в любом случае вы пробовали лучше, держите его в курсе, если хотите помочь мне в любое время,