Можно ли сделать эту HTML-разметку, не используя таблицы?

Взяв ES6, вы можете использовать синтаксис расширения ... , который принимает массив в качестве аргументов.

const arr = [4, 8, 2, 7, 6, 42, 41, 77, 32, 9];
const min = Math.min(...arr);

console.log(min);

С ES5 вы можете взять Function#apply , что займет this [118 ] и параметры в виде массива.

const arr = [4, 8, 2, 7, 6, 42, 41, 77, 32, 9];
const min = Math.min.apply(null, arr);

console.log(min);

Для невыровненных массивов возьмите функцию выравнивания, например

const
    flat = array => array.reduce((r, a) => r.concat(Array.isArray(a) ? flat(a) : a), []),
    array = [[1, 2], [3, 4]],
    min = Math.min(...flat(array));

console.log(min);
[ 1123]

101
задан Community 23 May 2017 в 12:34
поделиться

8 ответов

Нет ничего неправильно с использованием инструментов, которые доступны Вам, чтобы сделать задание быстро и правильно.

В этом случае таблица работала отлично.

я лично использовал бы таблицу для этого.

я думаю, что вложенных таблиц нужно избежать, вещи могут стать грязными.

49
ответ дан Gregor Brandt 24 November 2019 в 04:44
поделиться

Просто плавайте левый и правый и набор для очистки обоих, и Вы сделаны. Никакая потребность в таблицах.

Редактирование: я знаю, что получил много upvotes для этого, и я полагал, что был прав. Но существуют случаи, где у Вас просто должны быть таблицы. Можно попытаться делать все с CSS, и он будет работать в современных браузерах, но если Вы хотите поддерживать более старые... Не повторить меня, здесь связанный поток переполнения стека и напыщенная речь на моем блоге .

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

27
ответ дан Community 24 November 2019 в 04:44
поделиться

Это - своего рода вопрос о приеме: это выглядит ужасно простым, пока Вы не добираетесь до

, Говорят, что я хочу, чтобы заголовок и кнопка вертикально центрировались.

я хочу заявить для протокола, что да, вертикальное центрирование является трудным в CSS. Когда люди отправляют, и это кажется бесконечным на Так, "можете, Вы сделать X в CSS" ответ являетесь почти всегда "да", и их хныкание кажется невыровненным. В этом случае, да, тот конкретная вещь тверда.

Кто-то должен просто отредактировать весь вопрос вниз "действительно ли вертикальному центрированию, проблематично в CSS?".

17
ответ дан AmbroseChapel 24 November 2019 в 04:44
поделиться

Оставленный заголовок плавающий, право кнопки плавающее, и (вот первая часть, никогда не знали до недавнего времени) - делают контейнер из них обоих {overflow:hidden}.

, Который должен избежать z-индексной проблемы, так или иначе. Если это не работает, и Вы действительно нуждаетесь в поддержке IE5, разрешении и используете таблицу.

16
ответ дан 24 November 2019 в 04:44
поделиться

В чистом CSS рабочий ответ должен будет однажды просто использовать "display:table-cell". К сожалению, это не работает через текущие браузеры A-класса, таким образом, для всего, что Вы могли бы также использовать таблицу, если Вы просто хотите достигнуть того же результата так или иначе. По крайней мере, Вы будете уверены, что это работает достаточно далеко в прошлое.

Честно, просто используйте таблицу, если это легче. Это не причинит боль.

, Если семантика и доступность элемента таблицы действительно имеют значение для Вас, существует рабочий проект для того, чтобы сделать Вашу таблицу несемантической:

http://www.w3.org/TR/wai-aria/#presentation

я думаю, что это требует специального DTD вне XHTML 1.1, который просто вызвал бы целое text/html по сравнению с application/xml дебаты, поэтому давайте не идти туда.

Так, на Вашей неразрешенной проблеме CSS...

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

, Если можно соответствовать в рамках следующих ограничений, затем существует относительно простой путь:

  • высота этих двух элементов фиксируется.
  • высота контейнера фиксируется.
  • элементы будут достаточно узкими для не наложения (или может быть установлен на фиксированную ширину).

Затем можно использовать абсолютное расположение с отрицательными полями:

.group-header { height: 50px; position: relative; }
.group-title, .group-buttons { position: absolute; top: 50%; }
# Assuming the height of .group-title is a known 34px
.group-title { left: 0; margin-top: -17px; }
# Assuming the height of .group-buttons is a known 38px
.group-buttons { right: 0; margin-top: -19px; }

, Но это бессмысленно в большинстве ситуаций... Если Вы уже знаете высоту элементов, то можно просто использовать плавания и добавить достаточно поля для расположения их по мере необходимости.

Вот другой метод, который использует текстовую базовую линию для вертикального выравнивания двух столбцов как встроенных блоков. Недостаток здесь состоит в том, что необходимо установить зафиксированные ширины для столбцов для заполнения ширины от левого края. Поскольку мы должны сохранить элементы заблокированными к текстовой базовой линии, мы не можем только использовать float:right для второго столбца. (Вместо этого мы должны сделать первый столбец достаточно широким для проталкивания его.)

<html>
  <head>
    <title>Layout</title>
    <style type="text/css">
      .group-header, .group-content { width: 500px; margin: 0 auto; }
      .group-header { border: 1px solid red; background: yellow; }
      .valign { display: inline-block; vertical-align: middle; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { padding: 8px; width: 384px; }
      .group-buttons { padding: 8px; width: 84px; text-align: right; }
    </style>
    <!--[if lt IE 8]>
    <style type="text/css">
      .valign { display: inline; margin-top: -2px; padding-top: 1px; }
    </style>
    <![endif]-->
  </head>
  <body>
    <div class="group-header">
      <div class="valign">
        <div class="group-title">This is my title.</div>
      </div><!-- avoid whitespace between these! --><div class="valign">
        <div class="group-buttons"><input type="button" value="Collapse"></div>
      </div>
    </div>
    <div class="group-content">
      <p>And it works perfectly, but mind the hacks.</p>
    </div>
  </body>
</html>

HTML: Мы добавляем .valign обертки вокруг каждого столбца. (Дайте им более "семантическое" имя, если оно делает Вас более счастливыми.) Они должны быть сохранены без пробела, промежуточные или иначе текстовые пространства продвинут их независимо. (Я знаю, что это сосет, но это - то, что Вы получаете для того, чтобы быть "чистыми" с разметкой и разделить ее от уровня представления... Ха!)

CSS: Мы используем vertical-align:middle для выстраивания в линию блоков к текстовой базовой линии элемента заголовка группы. Различные высоты каждого блока останутся вертикально центрируемыми и выставят высоту их контейнера. Ширины элементов должны быть вычислены для установки ширине. Здесь, они 400 и 100 минус их горизонтальное дополнение.

IE фиксирует: Internet Explorer только отображает встроенный блок для исходно встроенных элементов (например, промежуток, не отделение). Но, если мы дадим отделение hasLayout и затем отобразим его встроенный, то оно будет вести себя точно так же, как встроенный блок. Граничная корректировка должна зафиксировать разрыв на 1 пкс наверху (попытайтесь добавить цвета фона к .group-заголовку для наблюдения).

7
ответ дан SamB 24 November 2019 в 04:44
поделиться

Я рекомендовал бы не использовать таблицу в этом экземпляре, потому что это не табличные данные; это чисто представляемо, чтобы определить местоположение кнопки в крайнем правом. Это - то, что я сделал бы для дублирования структуры таблицы (изменитесь на другой H# для удовлетворения, где Вы находитесь в иерархии своего сайта):

<style>
  .group-header { background: yellow; zoom: 1; padding: 8px; }
  .group-header:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  /* set width appropriately to allow room for button */
  .group-header h3 { float: left; width: 300px; }
  /* set line-height or margins to align with h3 baseline or middle */
  .group-header input { float: right; }
</style>

<div class="group-header">
  <h3>This is my title</h3>
  <input type="button" value="Collapse"/>
</div>

, Если Вы хотите истинное выравнивание по вертикали в середине (т.е., если текст переносит кнопку, все еще выравнивается серединой относительно обеих строк текста), то или необходимо сделать таблицу или работу что-то с position: absolute и поля. Можно добавить position: relative к выпадающему меню (или более вероятно его родитель) для получения по запросу его на тот же уровень упорядочивания как кнопки, позволив Вам ударить его выше их с z-индексом, если оно прибывает в это.

Примечание, в котором Вы не нуждаетесь width: 100% на отделении, потому что это - элемент блочного уровня, и zoom: 1, заставляет отделение вести себя как он, имеет clearfix в IE (другие браузеры берут фактический clearfix). Вам также не нужны все те посторонние классы при предназначении для вещей немного больше а именно, хотя Вам, возможно, понадобились бы отделение обертки или промежуток на кнопке для создания расположения легче.

3
ответ дан One Crayon 24 November 2019 в 04:44
поделиться

Сделайте двойное плавание в отделении и используйте clearfix. http://www.webtoolkit.info/css-clearfix.html у Вас есть какие-либо ограничения дополнения/поля?

<div class="clearfix">
   <div style="float:left">Title</div>
   <input type="button" value="Button" style="float:right" />
</div>
2
ответ дан bendewey 24 November 2019 в 04:44
поделиться
<div class="group-header">
    <input type="button" name="Button" value="Button" style="float:right" />
    <span>Title</span>
</div>
2
ответ дан Omer Bokhari 24 November 2019 в 04:44
поделиться