動的な幅のフィールド入力を作成して、div の幅に拡張しようとしています。
1 行に 2 つの入力がある場合、それらは div の 100% を埋めるために利用可能なスペースを動的に分割します。
1 行に入力が 1 つしかない場合は、幅全体を埋めます。
問題は、ラベルの幅と入力の幅がどちらも不明であることです (レスポンシブ Web デザイン)。
これがどれほど一般的であるに違いないと確信しているのかを考えると、これを行うのが難しいのは驚くべきことです。
http://imagepaste.nullnetwork.net/img/1339700574Screen%20Shot%202012-06-14%20at%203.04.59%20PM.png
JsFiddle を使用したいくつかの簡単なテスト (ところで、これまでに行ったことを確認できるようにサンプル コードを投稿してください) により、次のことがわかります。
<div style="width:100%;border:1px solid gold;">
<div style="width:100%; border:1px solid silver;">
<div style="float:left;width:45%">In1 <input style="width:90%;"></div>
<div style="float:right;width:45%">In2 <input style="width:90%;"></div>
</div>
<div style="clear:both;width:100%;border:1px solid silver;">
<div style="float:left;width:20%">In1 <input style="width:90%;"></div>
<div style="float:left;width:20%">In2 <input style="width:90%;"></div>
<div style="float:right;width:20%">In3 <input style="width:90%;"></div>
</div>
</div>
<div style="clear:both"> </div>
<table style="width:100%;border:1px solid gold;">
<tr>
<td style="width:49%;border:1px solid silver;">In1 <input style="width:60%"></td>
<td style="width:49%;border:1px solid silver;">In2 <input style="width:60%"></td>
</tr>
</table>
<table style="width:100%;border:1px solid gold;">
<tr>
<td style="width:29%;border:1px solid silver;">In1 <input style="width:60%"></td>
<td style="width:29%;border:1px solid silver;">In2 <input style="width:60%"></td>
<td style="width:29%;border:1px solid silver;">In2 <input style="width:60%"></td>
</tr>
</table>
こちら を参照してください。ご覧のとおり、どちらのバージョンもまったく適切ではありませんが、いつものように、テーブル ベースのレイアウトはより堅牢です。
主なことは、パーセンテージを計算することです。JS を使用しているため、これはかなり簡単です。ただし、ラベルも異なる可能性がある場合は、計算がかなり複雑になります。
はい、可能です。jQuery を使用すると、div 内の入力要素の数を数え、それに応じて要素の幅を調整できます。
使用するlengthかsize()、要素の数を決定してから、CSSを設定して同じことを行うことができます
これが大まかなモックアップです: http://jsfiddle.net/6CqKK/