Проблема с <div> тегами
Работает нормально:
Текст «Что бы ни было» в столбце 1, сопровождаемый радиокнопкой:
Работает также отлично (без переключателя с текстом):
Следующая ячейка ПОСЛЕ текста «Что бы то ни было» должна отображаться в столбце 1 следующей строки - вместо этого непосредственно под текстом.
Справка:
Структура таблицы сделана моим помощником html. Он генерирует код asp.net MVC2 для отображения переключателей с изображениями (!) В виде таблицы.
Помощник html принимает некоторые значения, такие как: Генерация таблицы с пятью переключателями в двух столбцах и добавление одного переключателя с текстом «Безотносительно». (Конечно, html-помощник принимает некоторые дополнительные значения, но это не проблема ...)
Таблица состоит из тегов <div> (тега <table> нет вообще!).
Я использую стили "ширина: 50%;" для таблицы с двумя столбцами и «float: left;».
Все отлично работает - до тех пор, пока в последнем столбце не отобразится переключатель с текстом (и без изображения). См., Например, рисунок 2: после «текстовой радиокнопки» следующий радиокнопка (с 3 изображениями) должна отображаться в первом столбце, а НЕ под текстом.
Что я не так делаю?
Дополнительная информация: одинаковое поведение в IE и Firefox.
Заранее спасибо!
Спасибо за быстрый ответ!
По запросу:
<div id="stars" style="width: 860px; border: solid 2px #000000; background-color:#CCCCCC;" >
<div id="div0" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix0" type="radio" text="6" value="false" />
<label for="idPrefix0">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="6" >
</label>
</div>
<div id="div1" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix1" type="radio" text="2" value="false" />
<label for="idPrefix1">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="2" >
</label>
</div>
<div id="div2" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix2" type="radio" text="5" value="false" />
<label for="idPrefix2">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="5" >
</label>
</div>
<div id="div3" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix3" type="radio" text="1" value="false" />
<label for="idPrefix3">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="1" >
</label>
</div>
<div id="div4" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix4" type="radio" text="4" value="false" />
<label for="idPrefix4">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="4" >
</label>
</div>
<div id="div5" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix5" type="radio" text="-1" value="false" />
<label for="idPrefix5">
Whatever
</label>
</div>
<div id="div6" style="width: 50.0%; float: left;" >
<input name="radioButtonName" id="idPrefix6" type="radio" text="3" value="false" />
<label for="idPrefix6">
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
<img src="/Content/Images/Dialog/gold_star.png" style="width: 16px; height: 17px;" alt="3" >
</label>
</div>
<div id="div7" style="width: 50.0%; float: left;" >
 
</div>
</div>
Странно (на первый взгляд):
Но объяснимо: Подумайте о цепочке: потяните ячейку / радиокнопку с 5 изображениями «две позиции / столбцы вправо» (где это должно быть) и представьте, что все следующие ячейки / радиокнопки будут следовать. Тогда все будет в нужном месте. ; -)