html - табуляция - pre тег



Можете ли вы сделать этот макет HTML без использования таблиц? (7)

Хорошо, у меня была простая проблема с компоновкой неделю или два назад. А именно, разделы страницы нуждались в заголовке:

+---------------------------------------------------------+
| Title                                            Button |
+---------------------------------------------------------+

Довольно простой материал. Thing - настольная ненависть, похоже, перешла в мир Web, о чем мне напоминали, когда я спросил, зачем использовать теги определений (DL, DD, DT) для HTML-форм вместо таблиц? Теперь обсуждалась общая тема таблиц vs divs / CSS, например:

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

  • Поплавок справа для кнопки или div, содержащий кнопку;
  • Положение относительно кнопки; а также
  • Позиция относительная + абсолютная.

Ни одно из этих решений не было удовлетворительным по разным причинам. Например, относительное позиционирование привело к проблеме z-index, где мое раскрывающееся меню появилось под контентом.

Поэтому я вернулся к:

<style type="text/css">
.group-header { background-color: yellow; width: 100%; }
.group-header td { padding: 8px; }
.group-title { text-align: left; font-weight: bold; }
.group-buttons { text-align: right; }
</style>
<table class="group-header">
<tr>
  <td class="group-title">Title</td>
  <td class="group-buttons"><input type="button" name="Button"></td>
</tr>
</table>

И он отлично работает. Он прост, как и обратно совместимый, как он получает (это будет работать, вероятно, даже на IE5), и он просто работает. Не возиться с позиционированием или поплавками.

Так может ли кто-нибудь сделать эквивалент без таблиц?

Требования:

  • Обратная совместимость: с FF2 и IE6;
  • Разумно совместим: в разных браузерах;
  • Вертикально по центру: кнопка и название имеют разную высоту; а также
  • Гибкость: позволяет достаточно точно управлять позиционированием (отступом и / или маркой) и стилем.

С другой стороны, сегодня я нашел пару интересных статей:

EDIT: Позвольте мне подробно остановиться на проблеме с плавающей точкой. Такие работы:

<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; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-title { float: left; padding: 8px; }
      .group-buttons { float: right; padding: 8px; }
    </style>
  </head>
  <body>
    <div class="group-header">
      <div class="group-title">This is my title</div>
      <div class="group-buttons"><input type="button" value="Collapse"></div>
    </div>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

Благодаря Ant P для overflow: hidden часть (по-прежнему не понимаю почему). Вот где проблема. Я хочу, чтобы заголовок и кнопка были вертикально центрированы. Это проблематично, потому что элементы имеют разную высоту. Сравните это с:

<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; overflow: hidden; }
      .group-content { border: 1px solid black; background: #DDD; }
      .group-header td { vertical-align: middle; }
      .group-title { padding: 8px; }
      .group-buttons { text-align: right; }
    </style>
  </head>
  <body>
    <table class="group-header">
    <tr>
      <td class="group-title">This is my title</td>
      <td class="group-buttons"><input type="button" value="Collapse"></td>
    </tr>
    </table>
    <div class="group-content">
      <p>And it works perfectly. It's simple, as backward compatibile as it gets (that'll work probably even on IE5) and it just works. No messing about with positioning or floats.</p>
      <p>So can anyone do the equivalent without tables that is backwards compatible to at least FF2 and IE6?</p>
      <p>On a side note, I came across a couple of interesting articles today:</p>
    </div>
  </body>
</html>

который отлично работает.


Answer #1

Float title left, float button right, и (вот часть, которую я никогда не знал до недавнего времени) - сделайте контейнер из них как {overflow:hidden} .

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


Answer #2

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

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

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

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

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

Итак, к вашей неразрешенной проблеме 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: справа для второго столбца. (Вместо этого мы должны сделать первый столбец достаточно широким, чтобы его перетащить).

<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 для выравнивания блоков к исходной базовой части элемента group-header. Различные высоты каждого блока будут располагаться вертикально по центру и выталкивать высоту их контейнера. Ширины элементов должны быть рассчитаны так, чтобы они соответствовали ширине. Здесь они составляют 400 и 100, минус их горизонтальное заполнение.

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


Answer #3

Просто поплавайте влево и вправо и установите, чтобы очистить оба, и все готово. Нет необходимости в таблицах.

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

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


Answer #4

Сделайте двойной float в div и используйте 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>

Answer #5

Я бы рекомендовал не использовать таблицу в этом экземпляре, потому что это не табличные данные; это чисто презентация, чтобы кнопка находилась в крайнем правом углу. Это то, что я сделал бы, чтобы дублировать структуру вашей таблицы (измените ее на другую 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-index, если дело доходит до этого ,

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


Answer #6

Я выбрал использовать флеш-бокс, потому что он делал вещи намного проще.
Вам просто нужно перейти к родительским элементам дочерних элементов, которые вы хотите выровнять и добавить display: box (с префиксом, конечно). чтобы заставить их сидеть по сторонам, используйте justify-content . пространство между правильной вещью, когда у вас есть элементы, которые должны быть выровнены до конца, как в этом случае (см. ссылку) ...
затем проверить правильность выравнивания. потому что я создал родительский элемент из двух элементов, которые вы хотите выровнять с помощью гибкой рамки, теперь легко использовать выравнивающие элементы: center. затем я добавил стили, которые вы хотели раньше, удалил float из заголовка и кнопки в заголовке и добавил прописку.

   .group-header, .group-content {
      width: 500px;
      margin: 0 auto;
    }
    .group-header{
      border: 1px solid red;
      background: yellow;
      overflow: hidden;
      display: -webkit-box;
      display: -moz-box;
      display: box;
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-justify-content: space-between;
      -moz-justify-content: space-between;
      -ms-justify-content: space-between;
      -o-justify-content: space-between;
      justify-content: space-between;
      webkit-align-items: center;
      -moz-align-items: center;
      -ms-align-items: center;
      -o-align-items: center;
      align-items: center;
      padding: 8px 0;
    }
 .group-content{
      border: 1px solid black;
      background: #DDD;
 }
    .group-title {
      padding-left: 8px;
    }
    .group-buttons {
      padding-right: 8px
    }

См. Демонстрацию


Answer #7
<div class="group-header">
    <input type="button" name="Button" value="Button" style="float:right" />
    <span>Title</span>
</div>




layout