当没有更多空间时将 Div 换行到新行

Question

I am working on a web application (asp.net mvc3)

I have a Main div. I want to add lots of div inside that main div.

But I want them to be like this: Divs should appear next to each others on a line, and when there is no more space left, the next div will wrap to a new line. (Similar to writing a text, when there is no more space on this line the next word will wrap to a new line)

I tried to use display: inline; to make the appear next to each others, but how can I make them wrap when they reach the end of the Main div?

Is there a way to do it without hard coding the positions? because divs are added dynamically so i don't know how big will they be or their number

Thanks

Answer 1

Try display: inline-block - http://jsfiddle.net/7FJRr/1/

UPDATE If IE7 is still a concern:

div {
    display: inline-block;
    zoom: 1; 
    *display: inline;
}

Answer 2

Is this what you mean?

http://jsbin.com/uzoruq/edit#javascript,html,live

I used float:left to arrange the content divs

I am not aware of solutions that will wrap a div but this will put the divs inline

EDIT

If you are willing to use spans you could do this:

http://jsbin.com/uzoruq/2/edit

I used display:inline for the spans.

Answer 3

It's possible to do it with the help of flex.

display: flex;
flex-wrap: wrap;

For example:

 .flex{ width: 5rem; background: yellow; display: flex; flex-wrap: wrap; justify-content: space-between; } .flex > div{ width: 2rem; background: black; color: white; margin-top: 1rem; margin-bottom: 1rem; }

 <div class="flex"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>