如何在 div 中适应动态 PHP 形式（能够适应 fullpage.js）？

Question

我正在使用 ajax 在一些 div 中生成动态表单，在一列中显示许多输入。我需要这些输入在许多列中可以是 "spread"，这样 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 将处理此问题。

如何在 div 中适应动态 PHP 形式（能够适应 fullpage.js）？

How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

javascript

css

php

jquery

fullpage.js