Хорошо, неделю или две назад у меня была простая проблема с макетом. А именно разделы страницы нуждались в заголовке:
+---------------------------------------------------------+
| Title Button |
+---------------------------------------------------------+
Довольно простые вещи. Дело в том, что ненависть к таблицам, похоже, взяла верх в веб-мире, о чем я вспомнил, когда спросил, зачем использовать теги списков определений (DL, DD, DT) для HTML-форм вместо таблиц? Теперь общая тема таблиц и div / CSS уже обсуждалась ранее, например:
Так что это не предназначено для общего обсуждения CSS и таблиц для макета. Это просто решение одной проблемы. Я пробовал различные решения вышеуказанного с помощью CSS, включая:
- Плавающий вправо для кнопки или div, содержащего кнопку;
- Относительное положение кнопки; и
- Положение относительное + абсолютное.
Ни одно из этих решений не было удовлетворительным по разным причинам. Например, относительное позиционирование привело к проблеме с z-индексом, когда мое раскрывающееся меню появилось под содержимым.
В итоге я вернулся к:
<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;
- Достаточно согласованно: в разных браузерах;
- По центру по вертикали: кнопка и заголовок разной высоты; и
- Гибкость: позволяет достаточно точно контролировать позиционирование (отступы и / или поля) и стиль.
Кстати, сегодня я наткнулся на пару интересных статей:
РЕДАКТИРОВАТЬ: Позвольте мне подробнее остановиться на проблеме с плавающей точкой. Такого рода работы:
<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>
который отлично работает.
Ответы:
Нет ничего плохого в том, чтобы использовать доступные вам инструменты для быстрого и правильного выполнения работы.
В этом случае стол работал отлично.
Лично я бы использовал для этого стол.
Я думаю, что следует избегать вложенных таблиц, все может запутаться.
источник
Просто перемещайтесь влево и вправо и установите очистку обоих, и все готово. Таблицы не нужны.
Изменить: я знаю, что получил много голосов за это, и я считал, что был прав. Но есть случаи, когда вам просто нужно иметь таблицы. Вы можете попробовать делать все с помощью CSS, и это будет работать в современных браузерах, но если вы хотите поддерживать старые ... Чтобы не повторяться, вот связанный поток переполнения стека и разглагольствования в моем блоге .
Edit2: Поскольку старые браузеры больше не так интересны, я использую загрузку Twitter для новых проектов. Он отлично подходит для большинства потребностей в макете и использует CSS.
источник
Это своего рода вопрос с подвохом: он выглядит ужасно просто, пока вы не дойдете до
Я хочу заявить для записи, что да, вертикальное центрирование в CSS затруднено. Когда люди публикуют сообщения (а это кажется бесконечным на SO), «можете ли вы сделать X в CSS», ответ почти всегда «да», и их нытье кажутся неоправданными. В этом случае, да, это сложно.
Кто-то должен просто отредактировать весь вопрос до «проблематично ли вертикальное центрирование в CSS?».
источник
Заголовок с плавающей запятой влево, кнопка смещения вправо и (вот часть, о которой я не знал до недавнего времени) - сделать контейнер из них обоих
{overflow:hidden}.В любом случае это должно избежать проблемы с z-индексом. Если это не сработает, и вам действительно нужна поддержка IE5, воспользуйтесь таблицей.
источник
overflow:hidden.В чистом CSS однажды рабочий ответ - просто использовать
"display:table-cell". К сожалению, это не работает в текущих браузерах класса A, поэтому вы можете использовать таблицу, если вы просто хотите достичь того же результата. По крайней мере, вы будете уверены, что это работает достаточно далеко в прошлом.Честно говоря, просто используйте стол, если так проще. Это не повредит.
Если семантика и доступность элемента таблицы действительно важны для вас, существует рабочий проект, позволяющий сделать вашу таблицу несемантической:
http://www.w3.org/TR/wai-aria/#presentation
Я думаю , что это требует специального DTD вне XHTML 1.1, который бы просто замутить все
text/htmlпротивapplication/xmlдискуссии, так что давайте не идти туда.Итак, к вашей нерешенной проблеме CSS ...
Чтобы выровнять два элемента по вертикали по их центру: это можно сделать несколькими разными способами, с некоторой тупой хакерской работой с CSS.
Если вы можете вписаться в следующие ограничения, то есть относительно простой способ:
Затем вы можете использовать абсолютное позиционирование с отрицательными полями:
Но в большинстве случаев это бессмысленно ... Если вы уже знаете высоту элементов, вы можете просто использовать числа с плавающей запятой и добавить достаточный запас, чтобы расположить их по мере необходимости.
Вот еще один метод, который использует базовую линию текста для вертикального выравнивания двух столбцов как встроенных блоков. Недостатком здесь является то, что вам нужно установить фиксированную ширину для столбцов, чтобы заполнить ширину от левого края. Поскольку нам нужно сохранить привязку элементов к базовой линии текста, мы не можем просто использовать float: right для второго столбца. (Вместо этого мы должны сделать первый столбец достаточно широким, чтобы его можно было перевернуть.)
HTML: мы добавляем оболочки .valign вокруг каждого столбца. (Дайте им более «семантическое» имя, если это сделает вас счастливее.) Их нужно оставлять без пробелов между ними, иначе текстовые пробелы будут раздвигать их. (Я знаю, что это отстой, но это то, что вы получаете, если будете «чисты» с разметкой и отделить ее от уровня представления ... Ха!)
CSS: мы используем,
vertical-align:middleчтобы выровнять блоки по базовой линии текста элемента group-header. Разная высота каждого блока будет оставаться по центру по вертикали и увеличивать высоту своего контейнера. Ширину элементов необходимо рассчитать по ширине. Здесь они 400 и 100 без горизонтального отступа.Исправления IE: Internet Explorer отображает встроенный блок только для встроенных элементов (например, span, а не div). Но если мы передадим div hasLayout, а затем отобразим его встроенным, он будет вести себя так же, как встроенный блок. Корректировка поля должна исправить зазор в 1 пиксель вверху (попробуйте добавить цвета фона в заголовок .group, чтобы увидеть).
источник
Я бы рекомендовал не использовать в этом случае таблицу, потому что это не табличные данные; кнопка, расположенная в крайнем правом углу, носит чисто презентационный характер. Вот что я бы сделал, чтобы продублировать структуру вашей таблицы (сменить H # на другой, чтобы он соответствовал вашему месту в иерархии вашего сайта):
Если вам нужно истинное вертикальное выравнивание посередине (т. Е. Если текст оборачивается, кнопка по-прежнему выровнена по середине относительно обеих строк текста), тогда вам нужно либо создать таблицу, либо поработать с
position: absoluteполями и. Вы можете добавить егоposition: relativeв свое раскрывающееся меню (или, что более вероятно, в его родительское), чтобы вывести его на тот же уровень упорядочения, что и кнопки, что позволит вам поднять его над ними с помощью z-index, если до этого дойдет.Обратите внимание, что вам не нужен
width: 100%div, потому что это элемент уровня блока иzoom: 1заставляет div вести себя так, как будто он имеет clearfix в IE (другие браузеры выбирают фактическое clearfix). Вам также не нужны все эти посторонние классы, если вы нацеливаетесь на вещи более конкретно, хотя вам может понадобиться обертка div или span на кнопке, чтобы упростить позиционирование.источник
zoom: 1in.group-header, который запускает hasLayout и заставляет IE 6 вести себя так же, как если бы у него был активен элемент: after.Сделайте двойной float в div и используйте clearfix. http://www.webtoolkit.info/css-clearfix.html Есть ли у вас какие-либо ограничения на отступы / поля?
источник
источник
Я решил использовать Flexbox, потому что это значительно упростило работу.
В основном вам нужно перейти к родителю детей, которых вы хотите выровнять и добавить
display:box(конечно, с префиксом). Чтобы заставить их сидеть по бокам, используйте justify-content . Пробел между ними - это правильно, когда у вас есть элементы, которые нужно выровнять до конца, как в этом случае (см. Ссылку) ...Тогда проблема с вертикальным выравниванием. Поскольку я сделал два элемента родительскими, вы хотите выровнять Flexbox. Теперь легко использовать
align-items: center.Затем я добавил стили, которые вы хотели раньше, удалил float из заголовка и кнопку в заголовке и добавил отступ:
См. Демонстрацию
источник
Я согласен с тем, что на самом деле следует использовать таблицы только для табличных данных по той простой причине, что таблицы не отображаются до тех пор, пока они не закончат загрузку (независимо от того, насколько это быстро; это медленнее, чем метод CSS). Однако я считаю, что это самое простое и элегантное решение:
С помощью этой базовой формы можно стилизовать функцию кнопки и любые дополнительные детали. Приносим извинения за плохие теги.
источник