Question

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

你将如何处理这个问题（以一种简单的方式，让像我这样的非程序员能够理解并尝试实现）？

我使用的是fullpage.js，所以我需要包含不超过页面90％的格式的div，基本上。

以这个简单的形式为例：

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只是一个可以宽100％，高90％的div。

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将处理此事。

如何在div中拟合动态PHP表单（以便能够适合fullpage.js）？

1 个答案: