javascript - 如果超过一定宽度就创建一个新的？

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/