当没有更多空间时,将Div包装到新行

Question

我正在开发一个Web应用程序(asp.net mvc3)

我有一个主要的div.我想在主div中添加很多div.

但我希望它们是这样的:Divs应该在一条线上彼此相邻,当没有剩余空间时,下一个div将换行到一个新线.(类似于写文本,当此行没有更多空格时,下一个单词将换行到新行)

我试图display: inline;让它们出现在彼此旁边,但是当它们到达主要div的末尾时如何让它们换行？

有没有办法在没有硬编码位置的情况下做到这一点？因为div是动态添加的,所以我不知道它们有多大或者它们的数量

谢谢

Answer 1

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

更新如果IE7仍然是一个问题:

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

Answer 2

在flex的帮助下可以做到这一点。

display: flex;
flex-wrap: wrap;

例如：

display: flex;
flex-wrap: wrap;

.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;
}