Question

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

/jess/design.html

编辑：想出它的一部分......表格宽度的问题。如果有人不能帮助解决这个问题，仍然试图找出如何获得下面的单选按钮。

Answer 1

只需将每个单选按钮及其图像放在一个带有width: 100%的div中，它应该可以解决问题。

编辑：没有等待，这会将收音机放在图像的右侧，尝试将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，但无论如何你最好还是试着，如果想要帮助随时与我联系，请继续，

单选按钮与图像格式

3 个答案: