1

フォームの入力要素に 2 つ以上の列に相当する DIV を持たせようとしています。非常に複雑なフォームで、いくつかの要素はいくつかの回答に応じて表示または非表示になります。

問題は、効果的な非表示/表示を使用しているときに、IE6 で DIV を適切なスペースに配置できないことです。これは主に機能するものです：

.first_column
{
  float:left;
  clear:both;
}
.second_column
{
  float:left;
}

そしていくつかのHTML...

<div id="question1" class="first_column">
first row, column 1 <input type="text" id="asdf">
</div>

<br style="clear:both;" />

<div id="question2" class="first_column">
second row, column 1 <input type="text" id="asdf2">
</div>

<div id="question3" class="second_column">
second row, column 2 <input type="text" id="asdf3">
</div>

<br style="clear:both;" />

これは期待どおりに機能します。問題は表示/非表示です。#question1 を非表示にすると、改行が残ります。これは、この小さな例ではそれほど悪くありませんが、表示/非表示に応じて多くの質問がある場合、質問の行間に大きなギャップが生じ始めます。

その改行なしでこれを達成するにはどうすればよいですか?

4

5 に答える 5

1

br の代わりに div で margin-bottom を使用します

于 2010-01-25T19:56:02.760 に答える
1

完全な行を別の div でラップし、row_1、row_2 のような ID を付けることをお勧めします。これには、すべての質問と br が含まれます。次に、行を非表示にすると、br も非表示になります。

于 2010-01-25T20:08:12.933 に答える
0

この問題のために、私のウェブサイトで私はこれを使用します：

CSSの場合：

.spacer
{clear: both; visibility: hidden;}

HTMLの場合：

<div class="spacer"></div>

DIVは、ピクセルを移動しないため、BR（またはHR）よりも優れているため、他のコンテンツDIVにマージンを自由に適用して、必要な完璧なレイアウトを実現できます。これは、IE6でも、すべてのブラウザーで機能します。

これにより、フローティングの問題のほとんども修正されます。これがなければ、クロスブラウザである他の解決策は見つかりません。

于 2010-01-27T15:56:06.797 に答える
0

残念ながら、IE6 は、他のすべてのブラウザーとは異なる方法で HTML をレンダリングするという決意を揺るぎません。残念ながら、クリアで br を使用しても十分に単純な解決策を思い付くことができませんでした。まあ... IE6 と別の場所で戦う時が来ました。

提案をありがとう。

于 2010-02-10T23:55:21.630 に答える
0

このパターンを使用します。より良いセマンティクス、シンプルなコード。非表示/表示のためにこれらを DIVS でラップします。

this.next('.question').toggle() - プロトタイプ ライブラリを使用します。指定されたクラス名を持つ次の要素を見つけ、その要素を非表示/表示します。

<a href="javascript:;//open question" onclick="this.next('.question').toggle()">open</a>
<div class='question'>
<label>First Name</label>
<input .... />
<div class="formClear"></div>
</div>

...そしてこのCSS

.label {
width:120px;
float:left;
margin-right:15px
}

.input {
float:left
}

.formClear {
clear:left;
height:15px;
}
于 2010-01-25T20:09:53.113 に答える