编辑**我忘了设置容器的宽度
我正在构建一个MVC webapp并且我有一个@foreach(集合中的var项)循环,它创建了一个内联块div(因为我希望它们彼此相邻显示)。我的问题是循环基于连接的用户,因此创建的div的数量并不总是相同,并且超过一定量它将溢出容器外。有没有办法(或者什么是好的方式)也可以当达到容器宽度时,下一个动态div将在新行上?
对任何可以提供帮助并度过美好时光的人来说。
答案 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一样显示。干杯