div中的自动换行符

Question

我正在尝试在特殊的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>

CSS：

.photoPrincipal {
  width: 600px;
  height: 300px;
  background-color: blue;
}

.photoView {
  width: 600px;
  height: 300px;
  background-color: rgba(0, 0, 0, 1);
  margin-top: 50px;
}

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

修改
我提到我使用SimpleGrid，它是一个“CSS库”，它为网格提供css。现在它适用于此：http://jsfiddle.net/jmsqskyn/

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

我尝试应用display:block，但它没有改变任何内容。

Answer 1

将您的css切换为{DID的display:inline-block。

因此，自编辑以来，请将其更改为：

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

如果您无法使用display:inline-block;，请尝试将其切换为float:left;。

Answer 2

希望这会有所帮助：

• 我添加了一个浮点数：左边是.photoSimple，所以我们必须清除父容器（.photoView）。

• 您也可以在.photoView中使用clearfix，但溢出：隐藏，暂时可以使用。

• 选中此项：http://www.adamkaplan.me/css-clearfix/。

演示：http://jsfiddle.net/jmsqskyn/

使用clearfix进行演示：http://jsfiddle.net/jmsqskyn/1/

.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 */
}