如何在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只是這將具有繳費像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會處理這個。