Достигнуто ли такое выравнивание без <таблицы>?

Требуемый результат

Моя цель - выравнивание, как показано на приложенном изображении (поля слева могут иметь любую ширину, но поля справа должны начинаться с того же X координата).

Сейчас я использую простой табличный код для достижения этой цели:

<table><tr>
<td>Left1</td><td>Right 1</td></tr>
<tr><td>Left 2</td><td>Right 2</td></tr></table>

Однако я слышал, что использование таблиц вообще плохо. Есть ли способ, которым я мог бы достичь того же дизайна с помощью CSS? Сайт предназначен для мобильных устройств, которые могут не поддерживать модный CSS, поэтому код должен быть максимально простым.

РЕДАКТИРОВАТЬ : поскольку я по-прежнему время от времени получаю уведомление по этому вопросу от людей, которые (предположительно) только начинают работать с HTML, как я это делал, пожалуйста, обратитесь к принятому ответу BT поскольку это, безусловно, лучший способ для достижения этой функциональности. Вопрос, предложенный в качестве «возможного дубликата» (31 мая 2016 года), в настоящее время не предлагает подход на основе CSS для таблицы-строки /таблицы-столбца и требует от вас угадать работу.

10 голосов | спросил AM- 13 J0000006Europe/Moscow 2012, 22:59:15

5 ответов


0

Я нашел гораздо более простой способ сделать это случайно. Скажем, у вас есть следующее:

<div class='top'>
  <div>Something else</div>
  <div class='a'>
    <div>Some text 1</div>
    <div>Some text 2</div>
  </div>
  <div class='a'>
    <div>Some text 3</div>
    <div>Some text 4</div>
  </div>
</div>

Вы можете выровнять Some text 1 и Some text 2 используя стиль отображения таблицы CSS следующим образом:

.a {
  display: table-row;
}
.a div {
  display: table-cell;
}

Самое классное то, что до тех пор, пока div 'top' НЕ стилизован display: table, другие вещи, такие как "Something else" может быть проигнорировано с точки зрения выравнивания. Если «верхний» div в стиле display: table, то «Some text 1» будет выровнен с «Something else» (т.е. он обрабатывает все его дочерние элементы любят строки таблицы, даже если они имеют другой стиль отображения).

Это работает в Chrome, но я не уверен, что его поведение будет таким, но я рад, что это работает.

   .a {
      display: table-row;
    }
    .a div {
      display: table-cell;
    }
    <div class='top'>
      <div>Something else</div>
      <div class='a'>
        <div>Some text 1</div>
        <div>Some text 2</div>
      </div>
      <div class='a'>
        <div>Some text 3</div>
        <div>Some text 4</div>
      </div>
    </div>
ответил B T 17 J000000Friday15 2015, 04:03:15
0

Здесь вы можете использовать это для получения требуемого вывода.

Использование таблиц IMO не является плохой практикой, на самом деле их следует использовать там, где требуются табличные данные, или формат данных напоминает таблицу.

Однако создание полной страницы или чего-либо, что не должно отображаться в табличном формате, с использованием таблицы не рекомендуется, и на самом деле это очень и очень неправильно. Вот пример использования не-табличной структуры:

HTML:

<form>
    <label for="name">Email: </label><input id="name" type="email" placeholder="@" />
    <br/><br />
    <label>Password: </label><input type="password" id="password"  placeholder="*"/>
</form>

CSS:

label {
    width: 80px;
    display: block;
    vertical-align: middle;
    float:left;
    clear:left;
}
input {
    border-top-left-radius:5px;
    border-bottom-right-radius: 10px;
    background: #141414;
    color: #fdd56c;
    outline: none;
}

Вот пример

ответил Pranav 웃 13 J0000006Europe/Moscow 2012, 23:18:18
0

Хотя с таблицами можно добиться того же, семантически неверно использовать таблицу с целью компоновки. Тем более, что вы можете добиться того же, используя всего одну или две строки CSS.

Дайте вашим ярлыкам фиксированную ширину (что-то большее, чем самый длинный текст ярлыка).

<style>
label {
    width: 100px;
    display: inline-block;
}​
</style>

<label>Name</label>
<input type="text" />
<br/>
<label>Email Address</label>
<input type="text" />​

Пример

ответил xbonez 13 J0000006Europe/Moscow 2012, 23:02:38
0

Да, такое выравнивание возможно. Используя CSS-классы, вы можете разметить свой HTML-код таким образом, чтобы добиться такого же внешнего вида таблицы без головной боли при использовании таблицы (или при том, что разметка выглядит некрасиво).

Использование этого CSS:

.label {
    display: inline-block;
    width: 100px;
}

.inputBox {
    width: 200px;
}

и этот HTML:

<span class="label">E-mail:</span><input type="email"></input><br>
<span class="label">Password:</span><input type="text"></input>

вы получите нужный макет.


Чтобы сделать это с поддержкой IE7, измените приведенный выше CSS на следующий:

.label {
    display: block;
    width: 100px;
    float: left;
    clear: left;
}

Затем добавьте эту строку ниже уже показанных строк:

<div style="clear: left"></div>

Пример использования IE7-совместимых настроек: http://jsfiddle.net/bbXXp/

ответил saluce 13 J0000006Europe/Moscow 2012, 23:03:09
0

True. Я изучаю это трудным путем. Я использовал таблицу для выравнивания, и теперь некоторые выравнивания становятся странными на небольших экранах (например, мобильный телефон, планшеты и т. Д.). Следовательно, я переключаюсь на div. Предпочтительно использовать <div style="display:inline-block">...</div>, который будет выравниваться автоматически, если экран меньше. Поэтому я советую использовать таблицу только для подлинных таблиц, а не для выравнивания элементов управления в теле.

ответил Vijay Srinivas 21 +03002016-10-21T09:53:05+03:00312016bEurope/MoscowFri, 21 Oct 2016 09:53:05 +0300 2016, 09:53:05

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132