Как разместить некоторые DIV в столбцах без <br />

Question

Я пытаюсь получить два или более столбцов DIV для элементов ввода в форме. Это очень сложная форма, и некоторые элементы будут скрыты и показаны в зависимости от некоторых ответов.

Проблема в том, что я не могу вывести DIV в пространство соответственно в IE6, имея эффективное скрытие / показ. Это то, что в основном работает:

.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 и дать ему идентификатор, например row_1, row_2. Это будет включать все вопросы плюс бр. Затем, когда вы прячете строку, BR тоже прячется.

Answer 2

Используйте маржинальное основание на ваших делениях вместо br

Answer 3

К сожалению, IE6 непоколебимо решает отображать HTML не так, как любой другой браузер. К сожалению, я не смог придумать достаточно простого решения с использованием br с clear. Ну что ж ... пора сражаться с IE6 в другом месте.

Спасибо за предложения.

Answer 4

Для этой проблемы на своих сайтах я использую это:

В CSS:

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

В HTML:

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

DIV лучше, чем BR (или HR) для этого типа вещей, потому что он не перемещает пиксель, поэтому вы можете применять поля для других DIV контента, чтобы иметь идеальный макет, который вы хотите. Это работает во всех браузерах, в том числе и в IE6.

Это также исправит большинство плавающих проблем. Я не нахожу другие решения без этого, которые являются кросс-браузерными.

Answer 5

Используйте этот шаблон. Лучшая семантика, простой код. Оберните их в 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;
}