Например так:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Floating fields example</title>
<style type="text/css">
div#floatingFields
{
max-width: 650px; /* 650 = 3 * 200 + some place for fields' paddings and margins */
}
div.inputField
{
float: left;
width: 200px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="floatingFields">
<div class="inputField">
<label>Field 1:<input type="text" />
</div>
<div class="inputField">
<label>Field 2:<input type="text" />
</div>
<div class="inputField">
<label>Field 3:<input type="text" />
</div>
<div class="inputField">
<label>Field 4:<input type="text" />
</div>
<div class="inputField">
<label>Field 5:<input type="text" />
</div>
<div class="inputField">
<label>Field 6:<input type="text" />
</div>
</div>
</body>
</html>
Есть форма, где название поля для ввода и сам контрол расположены по три на одной строке, примерно так:
<table>
<tr>
<td>
Поле 1:
</td>
<td>
<input type="text">
</td>
<td>
Поле 2:
</td>
<td>
<input type="text">
</td>
<td>
Поле 3:
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
Поле 4:
</td>
<td>
<input type="text">
</td>
<td>
Поле 5:
</td>
<td>
<input type="text">
</td>
<td>
Поле 6:
</td>
<td>
<input type="text">
</td>
</tr>
</table>
Проблема в том, что такая верстка статична, если мне не нужно по секьюрити отображать несколько полей и я их скрываю — форма просто теряет вид.
При помощи дивов достаточно просто сделать так, что при удалении, например, первого поля из строки, остальные смещаются в лево, но скажем если я скрываю два поля из строки, и на строке остается только одно — это уже не красиво. Собственно, хотелось бы чтобы в этом случае места этих полей заняли бы поля с нижних строк и т.д. Такое, вообще, возможно без императивного кодирования?
FreddieM wrote:
> Есть форма, где название поля для ввода и сам контрол расположены по три
> на одной строке, примерно так:
А чем так не нравится?
[html]
<p>
> Поле 1:
> <input type="text">
> Поле 2:
> <input type="text">
> Поле 3:
> <input type="text">
> Поле 4:
> <input type="text">
> Поле 5:
> <input type="text">
> Поле 6:
> <input type="text">
</p>
[/html]
Posted via RSDN NNTP Server 2.1 beta
<label>'ы конечно забыл закрыть
Здравствуйте, MozgC, Вы писали:
MC>Например так:
MC><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
MC><html xmlns="http://www.w3.org/1999/xhtml">
MC><head>
MC><title>Floating fields example</title>
MC><style type="text/css">
MC>div#floatingFields
MC>{
MC> max-width: 650px; /* 650 = 3 * 200 + some place for fields' paddings and margins */
MC>}
MC>div.inputField
MC>{
MC> float: left;
MC> width: 200px;
MC> margin-bottom: 10px;
MC>}
MC></style>
MC></head>
MC><body>
MC> <div id="floatingFields">
MC> <div class="inputField">
MC> <label>Field 1:<input type="text" />
MC> </div>
MC> <div class="inputField">
MC> <label>Field 2:<input type="text" />
MC> </div>
MC> <div class="inputField">
MC> <label>Field 3:<input type="text" />
MC> </div>
MC> <div class="inputField">
MC> <label>Field 4:<input type="text" />
MC> </div>
MC> <div class="inputField">
MC> <label>Field 5:<input type="text" />
MC> </div>
MC> <div class="inputField">
MC> <label>Field 6:<input type="text" />
MC> </div>
MC> </div>
MC></body>
MC></html>
MC>
спасибо, кул.
