Почему два элемента div рядом друг с другом в столбцах не в одинаковом положении

Question

Пожалуйста, взгляните на эту скрипку: http://jsfiddle.net/d3uc9/4/

У меня есть проблема с этим, так как два элемента div в таблице рядом друг с другом не находятся на одной границе, даже если они думают, что они имеют один и тот же класс CSS и т. Д.

Что я сделал не так в этом примере, и должен ли я изменить их, чтобы они были в одной строке верхнего края?

Спасибо, я старался быть максимально ясным.

То, что я имею в виду, это то, что они должны иметь одну и ту же границу, но они этого не делают, и что я должен сделать, чтобы это исправить?

Answer 1

Вам просто нужно что-то вроде:

td {    vertical-align: top;}

Пример скрипки

Это говорит о том, что содержимое ячейки таблицы выровнено по верху ячейки, а не по середине. Это необходимо, потому что ваша левая рука не такая большая, как правая.

Также я заметил, что вы дублируете идентификаторы несколько раз в вашем HTML (например, <div id="stylized" class="myform">). Это недопустимый HTML и потенциально может вызвать непредвиденное поведение в браузерах. Идентификаторы должны быть уникальными, и если вы хотите идентифицировать несколько элементов одинаково для целей стиля, вам следует использовать классы.

например.

<div class="stylized myform">

Answer 2

Просто добавьте в свой CSS:

td {vertical-align:top;}

Answer 3

При добавлении valign="top" столбец слева будет выровнен по верху строки.

Answer 4

Проблема в вертикальном выравнивании стола. Самый простой способ исправить это - добавить valign = "top" в <tbody> или <tr>. Вы также можете сделать это через css, указав вертикальное выравнивание: верх для <tr>.