问题
I have a parent container that holds a list of floated items. The parent container does nicely expand to the right when new floated items are added.
But as I add more items and the items come near the right side of the window the new item just jumps to a new row. Instead, I want it to keep expanding to the right, making my parent container larger than 100%.
Is it possible to define a container width to be something like max-width: infinite;?
To answer my own question I know I just can make a max-width of 5000% or something, but I was just wondering if there is a better solution. I think it's a kind of strange that the height of a page is max-width: infinite; and the width of a page cannot have the same behavior.
Maybe this is just a silly question, but I ask it anyway :P.
回答1:
As far as i'm aware, you can not reliably do this cross-browser without using Javascript to calculate the widths of your floats.
Then, you can have a "wrapper" div around the above, that ensures that hides the fact your floats may be 5000px in width. Using overflow-x to scroll will give the appearance that your div is constantly growing.
I think this is due to the box model, as far as i'm aware there is no container that gets bigger and bigger and bigger, without a calculated width. You will always hit a parent block element along the way up the DOM hierarchy (think body/html) with a fixed width.
回答2:
I think that overflow:visible should do the trick.
来源：https://stackoverflow.com/questions/6042327/css-dynamic-width-larger-than-100