javascript - 如果超过一定宽度就新建一个<td>？

Question

在我的 MVC 站点中，我有以下代码行:

<h2>@Model.Question</h2>
    @using (Html.BeginForm("Index", "Result", FormMethod.Post))
    {
        <table cellspacing="10">
            <tr>
                @foreach (string answer in Model.Answers)
                {
                    <td><input type="radio" name="answer" value="@answer" /><span>@answer</span></td>
                }
            </tr>
        </table>
        <div id="footer">
            <input class="btn btn-success" direction="false" type="submit" name="Back" value="Back" />
            <input class="btn btn-success" type="submit" />
        </div>
    }

(忽略页脚中当前实现不佳的第一个按钮)

<input type="radio...返回与数据库中的答案相同数量的单选按钮。我的问题是，对于一个问题，有很多答案，它开始使页面横向滚动，如下图所示

我想要发生的是单选按钮从新行开始，可能在另一个 <td> 中，当它开始横向走得太远时。当它到达我可以创建的周围 div 的边界时可能完成吗？或者当它超过一定的像素宽度时？我不太确定如何处理这个问题。提前致谢!

Answer 1

与其在工作中使用表格，不如使用固定宽度(或百分比宽度)的 DIV 并向左浮动，以便它们粘在一起。当一行元素过多时，它们会自动跳转到新行。如果您要更改浏览器的宽度，这也将起作用。

CSS部分:

.elements {
  border: 1px solid red;
}

.elements:before,
.elements:after{
  display: table;
  content: " ";
}

.elements:after {
  clear: both;
}

.element {
  float: left;
  min-height: 1px;
  border: 1px solid blue;
  margin: 2px;
}

HTML 部分:

<div class="elements">
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
  <div class="element">
    <input type="radio" name="radio" value="" /> Radio
  </div>
</div>

https://jsfiddle.net/4xvdcw9b/2/