Как поместить динамическую форму PHP в div (чтобы иметь возможность соответствовать fullpage.js)?

Question

Как поместить динамическую форму PHP в div (чтобы иметь возможность соответствовать fullpage.js)?

Я использую 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%.

1

css fullpage.js javascript jquery php

Решение

Accepted Answer

Я думаю, что вы можете посмотреть на 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>

1

Другие решения

Других решений пока нет …

Источник