Сосредоточить жидкостную сетку элементов без установки жесткой ширины на родительском элементе - PullRequest
10 голосов
/ 30 ноября 2011

Я бы хотел центрировать «сетку» элементов, которая - при изменении размера - подстраивается под себя.

Примерно так:

 ___________________
|                   |
|    [] [] [] []    |
|    [] [] [] []    |
|    [] [] []       |
 -------------------
 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    [] []    |
|    []       |
 -------------

Я пытался установить max-width, но это приводит к этой проблеме при изменении размера:

 ________________
|                |
|    [] [] []    |
|    [] [] []    |
|    [] [] []    |
|    [] []       |
 ----------------
 _____________
|             |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| [] []       |
| []          |
 -------------

Я не считаю использование медиазапросов и установку жестких widths (или даже max-widths) для каждой конфигурации реальным решением.

Я открыт для CSS3 до тех пор, пока он грациозно ухудшается, и хотел бы избежать javascript.

Редактировать: Добавление несемантических элементов также является нарушителем условий, контейнеромdiv или что-то было бы сносно, но не идеально.

Разметка должна быть следующей:

 <ul>
      <li>...</li>
      <li>...</li>
      <li>...</li>
 </ul>

Вот демонстрационная версия , чтобы начать работу.

Спасибо.

1 Ответ

6 голосов
/ 30 ноября 2011

Все еще немного неясно, каковы ваши точные требования к центрированию (как, например, все ваши иллюстрации выше показывают четное число элементов, поэтому я не знаю, чего вы ожидаете от нечетного числа. В вашей скрипке япросто добавил text-align: center к ul и добился центрирующего эффекта (http://jsfiddle.net/nR9Mk/1/), но я не знаю, ведет ли он себя так, как вам хочется.

Обновление : если вы имеете дело только с четными числами и хотите, чтобы они оставались сгруппированными по двум, то это будет работать: http://jsfiddle.net/nR9Mk/8/.

КРУГЛЫЙ 2 : на основе вашего раскрытого "нечетного"Требования к нумерации, я придумала решение, которое работает. Примечание: 1) оно требует некоторой дополнительной разметки HTML, 2) вам нужно установить какой-то практический предел того, насколько широко вы хотите идти, и при этом получить эффект. Здесь - это код с элементами «буфера», которые открываются с помощью outline, а здесь - это с удаленным контуром.

КРУГЛЫЙ 3 : Я знаю, что вы уже приняли мой ответ, но я уже работал над этим, поэтому я решил, что предложу его в любом случае.На основании вашего комментария о нарушении условий сделки представляет собой измененный план , который может быть полезен вам (или кому-то еще).Это гибрид - «иногда» он выталкивает элементы влево (обычно, когда это было бы очень неудобно, чтобы не делать), а иногда позволяет им оставаться «вне колонки», но центрироваться.Чтобы это не выглядело просто "странно", ему дают max-width из шести столбцов в ширину.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...