html - 如何在没有

Question

我正在尝试为表单中的输入元素设置两列或更多列的 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，则换行符仍然存在。这对于这个小例子来说还不错，但是如果有很多问题取决于显示/隐藏，那么问题行之间就会开始出现很大的差距。

如果没有换行符，我怎么能做到这一点？

Answer 1

在你的 div 上使用 margin-bottom 而不是 br

Answer 2

我建议将完整的行包装在另一个 div 中，并给它一个 id，如 row_1、row_2。这将包括所有问题以及 br。然后，当您隐藏该行时， br 也会隐藏。

Answer 3

使用这种模式。更好的语义，简单的代码。将这些包装在 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;
}

Answer 4

对于这个问题，在我的网站中我使用这个：

在 CSS 中：

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

在 HTML 中：

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

对于这类事情，DIV 比 BR（或 HR）更好，因为它不会移动像素，因此您可以自由地将边距应用于其他内容 DIV，以获得您想要的完美布局。这适用于所有浏览器，也适用于 IE6。

这也将解决大多数浮动问题。如果没有这个，我找不到其他跨浏览器的解决方案。

Answer 5

不幸的是，IE6 坚定不移地决心以不同于其他浏览器的方式呈现 HTML。不幸的是，我无法想出一个足够简单的解决方案，将 br 与 clear 结合使用。哦，好吧...是时候在别处与 IE6 战斗了。

感谢您的建议。