Выравнивание столбцов без таблиц или colspan

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

Вот пример ( plnkr):

<!DOCTYPE html>
<html>

  <head>
    <style>
      h1 {
          font-size: 1.1rem;
          border-bottom: 1px solid #ccc;
      }

      td {
        vertical-align: top;
        padding-bottom: 0.5rem;
      }
      </style>
  </head>

  <body>
      <table>
          <tr>
              <td colspan='2'><h1>This is a header that should span columns.</h1></td>
          </tr>
          <tr>
              <td>
                label:
                  <div>(This label is extra</div>
                  <div>tall because of these</div>
                  <div> extra lines.)</div>
              </td>
              <td><input placeholder='search for stuff'></td>
          </tr>
          <tr>
              <td>this is the longest label:</td>
              <td><input placeholder='search for stuff'>
                  <div>This content is extra tall.</div>
              </td>
          </tr>
          <tr>
              <td>longer label:</td>
              <td><input placeholder='search for stuff'></td>
          </tr>

          <tr>
              <td colspan='2' class='my-header-style'><h1>This is a header that should span columns.</h1></td>
          </tr>
          <tr>
              <td>long label:</td>
              <td><input placeholder='search for stuff'></td>
          </tr>
          <tr>
              <td>another label:</td>
              <td>
                  <div>This content is extra tall.</div>
                  <div>This content is extra tall.</div>
                  <div>This content is extra tall.</div>
              </td>
          </tr>
          <tr>
              <td>short label:</td>
              <td><input placeholder='search for stuff'></td>
          </tr>
      </table>
  </body>
</html>

У нас есть две группы списков "label: input", каждая из которых имеет свои заголовки. Крайний левый столбец соответствует ширине самой широкой метки в любой группе, и в то же время каждая строка также регулируется по высоте самого высокого элемента.

Как мне добиться такого же поведения без таблиц? Когда люди говорят о макете "без таблиц", это только для вещей, которые не заботятся о размере контента для их макета?

Источник

1 ответ

РЕДАКТИРОВАТЬ:

Извини. На самом деле вы можете сделать более двух элементов в строке, но (как обычно с float: right) вы должны расположить их в обратном порядке.

Если вам не нужно использовать таблицу: добавьте div для каждой строки и поместите невидимое горизонтальное правило между ними, чтобы они не наваливались друг на друга. Также: float: слева от меток и float: справа от полей ввода. Это работает, но я не знаю, как сделать линию из трех или более элементов, например: Рожденный: Месяц / День / Год, работа.

Во всяком случае, вот как вы можете это сделать.

<!DOCTYPE=html>
<html>
   <style>
       * {
          margin: 0;
          padding: 0;
       }
       body {
          float: left;
       }
       hr {
          clear: both;
          border: none;
       }
       p{
          float: left;
       }
       form {
          float: right;
       }
   </style>
   <body>
       <div id = "row_1">
              <p>looooooooooooo <br /> ooooooooooooo <br /> ooong label: </p>
              <form><input type="text" placeholder="Second" /></form>
       </div>
       <hr />
       <div id = "row_2">
              <p>short</p>
              <form><input type="text" placeholder="First" /></form>
       </div>
   </body>
</html>
Источник
Другие вопросы по тегам