如何:动态内联块元素在达到容器宽度时开始新行

时间:2014-10-07 15:37:19

标签: javascript html css asp.net-mvc

编辑**我忘了设置容器的宽度

我正在构建一个MVC webapp并且我有一个@foreach(集合中的var项)循环,它创建了一个内联块div(因为我希望它们彼此相邻显示)。我的问题是循环基于连接的用户,因此创建的div的数量并不总是相同,并且超过一定量它将溢出容器外。有没有办法(或者什么是好的方式)也可以当达到容器宽度时,下一个动态div将在新行上?

对任何可以提供帮助并度过美好时光的人来说。

1 个答案:

答案 0 :(得分:1)

没问题。

display:inline-block可以做到。

为此,您可以为容器设置任何宽度并使高度自动。

<强> HTML

<div class="container">
   <div class="content"></div>
   <div class="content"></div>
   <div class="content"></div>
   <div class="content"></div>
</div>

<强> CSS

.container {width:100%;height:auto;}
.content {width:50px; height:50px;background:red; display:inline-block;vertical-align:top;}

最后,你只是做你的foreach和任何要追加的东西。只需复制.content div并查看即可。希望它有所帮助

.content div的大小是否不同并不重要。最重要的是,您必须设置vertical-align:top,因为如果元素的高度不同,则为inline-block。彼此不会相同。

Inline-block几乎可以像没有任何javascript的Pinterest一样显示。干杯

DEMO