Элемент текстового поля «руины» макета страницы

Question

Итак, у меня есть форма, которая выглядит следующим образом: И, как вы можете видеть, «Опис» находится внизу, однако он должен быть сверху.Я пытаюсь исправить это правильно (без использования поплавка и фиксированной высоты) за прошедший час.Я бы предпочел решение, которое не включает элементы с плавающей точкой, но если этого не избежать, я не буду слишком разборчивым.

CSS:

#main {
    width: 800px;
    display: table;
}

selection {display: table-row}

section > * {
    display: table-cell;
    vertical-align: baseline;
    border-bottom: 1px solid #EEE;
}

#main h3 {
    font-weight: bold;
    font-size: 110%;
    width: 130px;
    padding: 10px;
    text-transform:capitalize
}
#main div {
    width: 650px;
    padding-top: 17px;
    padding-bottom: 20px;
}

HTMLвыдержка

<section>
    <h3><label for="date">Datum</label></h3>
    <div><input type="text" id="date" name="datum"/></div>
</section>
<section>
    <h3><label for="vp">Vrijeme</label></h3>
    <div><input type="text" id="vp" name="vp"/><br><br><input type="text" name="vz"/></div>
</section>
<section>
    <h3>Opis</h3>
    <div><textarea name="opis" rows="5" cols="50" style="resize: none;"></textarea></div>
</section>
<section>
    <h3>Logo</h3>
    <div><select id="combobox">
        <option value="">Select one...</option>
            <option value="...">...</option>
    </select></div>
</section>

Спасибо!: D

Answer 1

label s должно иметь для свойства vertical-align значение top

Пожалуйста, отметьте отметку http://dabblet.com/gist/1574836, где я также упростил HTML-код, добавил ассоциацию для / id для всех элементов формы (включая textarea и select) и метку для ввода, в котором его не было.

Answer 2

Учитывая опубликованные фрагменты кода (они едва ли являются достаточной выдержкой из фактического кода, отчасти потому, что в коде CSS используется имя класса, которое не отображается в коде HTML), следующее устранит возникшую проблему:

1) Измените разметку, добавив вокруг нее <div class=table> и </div>.

2) Добавьте код CSS

.table { display: table; }
section  {display: table-row}

3) Измените код CSS

vertical-align: baseline;

до

vertical-align: top;

Было бы намного проще и надежнее использовать настоящую таблицу HTML, используя CSS только для настройки деталей презентации.Таким образом, страница не будет разворачиваться в старых браузерах, которые вообще не поддерживают функции таблиц CSS.Таким образом, или даже при использовании таблицы CSS, вам не нужно устанавливать ширину в пикселях.Просто сначала проверьте, как все работает без каких-либо настроек ширины, и если какая-то настройка действительно необходима, рассмотрите возможность использования устройства em.