我正在开发Web应用程序（ASP.NET mvc3）我有一个主div。我想在主div中添加很多div。但我希望他们是这样的：div应该在一行中相邻出现，当没有更多的空间时，下一个div将换行。（类似于写文本，当此行没有更多的空间时，下一个单词将换行。）我尝试使用display: inline;使它们彼此相邻，但是当它们到达Main div的末尾时，我如何使它们换行？有没有一种方法可以不对位置进行硬编码？因为div是动态添加的，所以我不知道它们有多大或它们的数量谢谢
display: inline;
raogr8fs1#
尝试display: inline-block-http://jsfiddle.net/7FJRr/1/
display: inline-block
更新如果IE7仍然是一个问题：
div { display: inline-block; zoom: 1; *display: inline; }
lvmkulzt2#
在flex的帮助下可以做到这一点。
display: flex; flex-wrap: wrap;
例如：x一个一个一个一个x一个一个二个x
lskq00tm3#
你是这个意思吗？http://jsbin.com/uzoruq/edit#javascript,html,live我使用float:left来排列内容div我不知道解决方案，将 Package 一个div，但这将把div内联
float:left
编辑
如果你愿意使用spans，你可以这样做：http://jsbin.com/uzoruq/2/edit我使用display:inline作为跨距。
display:inline
nxowjjhe4#
使用display: flex，然后使用flex-wrap: wrap，然后添加justify-content: space-evenly，使所有内容看起来都很好。
display: flex
flex-wrap: wrap
justify-content: space-evenly
4条答案
按热度按时间raogr8fs1#
尝试
display: inline-block-http://jsfiddle.net/7FJRr/1/更新如果IE7仍然是一个问题：
lvmkulzt2#
在flex的帮助下可以做到这一点。
例如：
x一个一个一个一个x一个一个二个x
lskq00tm3#
你是这个意思吗？
http://jsbin.com/uzoruq/edit#javascript,html,live
我使用
float:left来排列内容div我不知道解决方案，将 Package 一个div，但这将把div内联
编辑
如果你愿意使用spans，你可以这样做：
http://jsbin.com/uzoruq/2/edit
我使用
display:inline作为跨距。nxowjjhe4#
使用
display: flex，然后使用flex-wrap: wrap，然后添加justify-content: space-evenly，使所有内容看起来都很好。