Jquery 自动换行div

我正试图在一个特殊的分区中显示图片。 现在看起来是这样的：

<div class="photoView center">
    <div class="grid">
        <div ng-repeat="i in [1,2,3]" class="groupPhoto">
            <div ng-repeat="i in [1,2,3,4]" class="col-1-4 photoSimple" style="display:inline-block;"></div>
        </div>
    </div>
</div>

因此，正如您所看到的，绿色div不在父div中（黑色div）

它是这样建造的：

<div class="photoView center">
    <div class="grid">
        <div ng-repeat="i in [1,2,3]" class="groupPhoto">
            <div ng-repeat="i in [1,2,3,4]" class="col-1-4 photoSimple" style="display:inline-block;"></div>
        </div>
    </div>
</div>

编辑
我不想提及我使用SimpleGrid，它是一个“CSS库”，为网格提供CSS。现在，它可以处理以下内容：

所以基本上我只想要每行4个绿色div。但它仍在继续

---

我尝试应用一个

显示：块

，但它没有改变任何东西。

将您的css切换到div的

显示：内联块

因此，在编辑后，将其更改为：

.photoSimple {
  width: 130px;
  height:75px;
  background-color: green;
  margin:10px;
  border: 2px dotted white;
  display:inline-block;
}

如果不能使用

display:inline块尝试将其切换为
浮动：左
希望这有助于：


我在.photoSimple中添加了一个float:left，因此我们必须清除父容器（.photoView）

您也可以在.photoView中使用clearfix，但overflow:hidden现在就可以了

请查看以下内容：


演示：

使用clearfix的演示：

你可以发布你的css吗？因为你的
.photoView
是固定大小（600x300）的，没有
溢出设置，默认情况下，
可见。将高度更改为auto.style=显示：内联块；你确定吗？它在这里工作：在你的CSS for
.photoSimple
，将其更改为
显示：内联块你认为这是什么意思？它要么有效，要么无效。这里有一个使用
float:left
的替代版本。我已经测试了这个版本和
display:inline block
版本，它们都在IE9+、FF和Chrome中工作。我需要你提供更多的信息来确定真正的问题，否则在JSFIDLE中它看起来很好。在JSFIDLE中，它不适合放在黑盒子中只有三个绿色盒子这：在FIDLE上非常有效，但我无法在我的网站上复制它。对我来说，其余的都隐藏起来了，没有“换行”@NicolasCharvozKurzawa我不明白你得到了什么。什么被隐藏了？你看过演示了吗？我刚刚在IE、Safari、Firefox和Chrome中测试了这个演示，效果很好。你在我的第一篇文章中看到我的图片了吗？所以我得到了这个，但是绿色的div被剪掉了overflows@NicolasCharvozKurzawa，这是clearfix的一部分：
.photoView{
    overflow:hidden; /* Add */
    width: 600px;
    /* height: 300px; */
    background-color: rgba(0, 0, 0, 1);
    margin-top: 50px;
}

.photoSimple{
    width: 125px;
    height:75px;
    background-color: green;
    margin:10px;
    border: 2px dotted white;
    display:block;
    float:left; /* Add */
}