javascript - 如何在 div 中适应动态 PHP 表单(以适应 fullpage.js)？

Question

我正在使用 ajax 在某些 div 中生成动态表单，在一列中显示许多输入。我需要这些输入可以“散布”在许多列中，以便 div 可以具有固定的高度。

您将如何解决这个问题(以一种简单的方式，以便像我这样的非程序员也能理解并尝试实现)？

我正在使用 fullpage.js，所以我需要包含表单的 div 基本上不超过页面的 90%。

以这个简单的形式为例:

for ($i=1; $i<=somelimit; $i++) {
        echo '<input type="text" name="number'.$i.'" /> 
        <input type="text" name="other'.$i.'" /> 
        <input type="button" id="button'.$i.'"><br>
        ';
    }

html/css 只是一个 div，可以使用 100% 宽度和 90% 高度。

Answer 1

我想你可能想为此寻找 flexbox，再加上 inline-block 回退(display: flex, display: inline-block)。

请注意，对于尚不支持 flexbox 的浏览器，布局可能会有所不同。

这是一个例子:

.form-container {
  display: flex;
  flex-wrap: wrap;
}
.form-field {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  margin: 0 1em 1em 0;
}

<form action="" method="POST">
  <ul class="form-fields">
    <li class="form-field">
      <label for="input1">Input 1</label>
      <input type="text" id="input1">
    </li>
    <li class="form-field">
      <label for="input2">Input 2</label>
      <input type="text" id="input2">
    </li>
    <li class="form-field">
      <label for="input3">Input 3</label>
      <input type="text" id="input3">
    </li>
    <li class="form-field">
      <label for="input4">Input 4</label>
      <input type="text" id="input4">
    </li>
    <li class="form-field">
      <label for="input5">Input 5</label>
      <input type="text" id="input5">
    </li>
    <li class="form-field">
      <label for="input1">Input 6</label>
      <input type="text" id="input6">
    </li>
    <li class="form-field">
      <label for="input7">Input 7</label>
      <input type="text" id="input7">
    </li>
  </ul>
</form>

您不需要任何元素的固定高度； display: inline-block 将处理这个问题。