Проблема с плавающими контейнерами CSS с переменной шириной

Question

У меня есть 3 плавучих контейнера неизвестной ширины. Окружающий контейнер имеет фиксированную ширину.

-------------
| X | X | X |
-------------

Внутри третьего контейнера снова есть плавающие элементы:

---------------------------
| X | X | X [ O | O | O ] |
---------------------------

Что происходит, когда эти элементы превышают ширину окружающего контейнера, так это то, что отдельные элементы помещаются в новую строку (что вполне нормально и ожидаемое поведение):

-------------------------
| X | X | X [ O | O | O |
  O | O ] |
-------------------------

Но я хочу, чтобы дочерние элементы с плавающей запятой были с такими отступами:

---------------------------------------------------------------------------------
| X | X | X [ O | O | O |
              O | O ] |
---------------------------------------------------------------------------------

У кого-нибудь есть только решение этой проблемы с помощью CSS? Должно работать в IE6 тоже. Я перепробовал много вещей, но затерялся в плавании.

Answer 1

Попробуйте этот пример , чтобы воспроизвести вашу проблему. Я даже не могу понять поведение, которое вы описываете, разве там только плавает?

Если элементы столбца плавают без ширины, то каждый элемент с плавающей точкой будет просто расширяться вместе со своим содержимым, а когда он не помещается в контейнер, он будет опускаться (весь элемент). Без установки ширины этих элементов-столбцов, вы ничего не можете с этим поделать css-wise.

Answer 2

Я не уверен во всех хитрых последствиях прямо сейчас - может быть, покажите код в JSFiddle для людей, с которыми можно поиграть?- но лучшее решение, которое приходит на ум #, вероятно, будет еще одна оболочка вокруг трех O, которые также плавают влево.