У меня есть DIV с гибкой шириной, например. минимальная ширина: 800 пикселей и максимальная ширина: 1400 пикселей. В этом DIV есть много блоков с фиксированной шириной 200px и display:inline-block. Таким образом, в зависимости от ширины родительского DIV эти поля заполняют все пространство.
Моя проблема - это пустое пространство с правой стороны, вызванное переменной шириной родительского div. Иногда это пустое пространство маленькое и выглядит нормально, но с разной шириной родительского блока это пустое пространство составляет почти 200 пикселей.
Не знаю, достаточно ли подробно описал свою проблему, надеюсь, эта картинка поможет описать мою реальную ситуацию:
И это то, что я хотел бы иметь:
Эта автоматическая маржа может быть легко достигнута с помощью TABLE. Однако я не знаю точного количества столбцов, так как оно зависит от разрешения экрана пользователя. Поэтому я не могу использовать таблицу и предпочитаю использовать CSS.
У кого-нибудь есть идея, как это решить? Заранее спасибо за ваши комментарии и ответы.
EDIT: мне не нужна поддержка IE6. Я хотел бы поддерживать IE7, но IE7 не является обязательным, поскольку я знаю, что существуют ограничения, поэтому я, вероятно, буду использовать фиксированную ширину «div.wrapper» в IE7.
EDIT2 Мне нужно обработать несколько строк этих блоков, чтобы они не превышали блок "div.wrapper" и правильно переносились в несколько строк блоков, а не только в одну длинную строку.
EDIT3 Я не знаю количество "столбцов", так как оно сильно зависит от разрешения экрана пользователя. Таким образом, на большом экране может быть 7 блоков в одном ряду, а на маленьких экранах может быть только 4 блока в одном ряду. Поэтому мне нужно решение, которое не устанавливает фиксированное количество ящиков в одной строке. Вместо этого, когда поля не помещаются в одну строку, их следует просто перенести на следующую строку.