8

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

我有一个主 div。我想在那个主 div 中添加很多 div。

但我希望它们是这样的： div 应该在一行中彼此相邻出现，当没有更多空间时，下一个 div 将换行。（类似于写文本，当这一行没有更多空格时，下一个单词将换行）

我试图用它display: inline;来使它们彼此相邻出现，但是当它们到达主 div 的末尾时，我怎样才能让它们换行呢？

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

谢谢

4

3 回答 3

11

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

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

div {
    display: inline-block;
    zoom: 1; 
    *display: inline;
}
于 2012-06-11T13:51:13.800 回答
1

你是这个意思吗？

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

我曾经float:left安排内容div

我不知道将包装 div 的解决方案，但这会使 div 内联

编辑

如果您愿意使用跨度，您可以这样做：

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

我用于display:inline跨度。

于 2012-06-11T13:53:18.257 回答
1

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

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;
}
<div class="flex">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

于 2021-11-20T18:36:37.847 回答