将浮动的行向下移动时溢出

Question

我在网站中创建了动态div框，我想在每行使用bootstrap有4个框，这是可行的，但每个框的底部都有一些文本，问题是当文本太长，它创建一个新行，div展开，但该div下面的框移动到右侧，而不是将所有行移到下面。 这是HTML：

<div class="row"> 
<div ng-repeat=""class="col-sm-3 album-art"> //loop to create the boxes 
    <div class="thumb"> 
     <div class="box"> 
      <span class="play" ng-click="">&#9658</span> 
      <div class="overlay"></div> 
     </div> 
     <img src= height="200" width="200"> 
     <p>text</p> 
     <p><i>text</i></p> 
    </div> 
</div> 

这是CSS我：

.album-art{ 
    padding-bottom: 20px; 
    padding-top: 20px; 
    margin-bottom: 10px; 
} 

.thumb { 
    position: relative; 
} 
.thumb .box { 
    position: absolute; 
    top: 0; 
    display: block; 
    width: 200px; 
    height: 200px; 
    text-align: center; 
    text-decoration: none; 
    cursor: pointer; 
} 

基本上就是我需要的是，当文本溢出，并创建一个新的生产线，当前行下面的行向下移动，而不是将每个元素向右移动。这个问题似乎出现在“album-art”类中，因为我删除了所有其他类并且问题仍然存在。

感谢

编辑：我添加图像进行更好的解释

这是当一切正常

但当文字较长

EDIT2：我在这里举了一个例子：jsfiddle.net/qgo7a701您可能必须将结果区域向左扩展以便每行看到4个方块

Answer 1

我不明白你的问题，但在bootstrap划分为12个单元格的行中，你可以用不同大小的行定义div。你可以使用col- [xl，lg，md，sm， xs] - [1至12]类。你可以看看这个链接： http://getbootstrap.com/examples/grid/

为您例如下面我试图让两排有两个箱子，我只将文本，以防止它溢出到下一个div的

.album-art{ 
 
    padding-bottom: 20px; 
 
    padding-top: 20px; 
 
    margin-bottom: 10px; 
 
} 
 

 
p{ 
 
     word-break: break-all; 
 
} 
 
.thumb { 
 
    position: relative; 
 
} 
 
.thumb .box { 
 
    position: absolute; 
 
    top: 0; 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<div class="row"> 
 
<div ng-repeat=""class="col-sm-3 album-art"> 
 
    
 
    //loop to create the boxes 
 
    <div class="thumb"> 
 
     <div class="box"> 
 
      <span class="play" ng-click="">&#9658</span> 
 
      <div class="overlay"> 
 
       
 
      </div> 
 
     </div> 
 
     <img src= height="200" width="200"/> 
 
     <p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p> 
 
     <p><i>text</i></p> 
 
    </div> 
 
    
 
</div> 
 
    
 
    <div ng-repeat=""class="col-sm-3 album-art"> 
 
    
 
    //loop to create the boxes 
 
    <div class="thumb"> 
 
     <div class="box"> 
 
      <span class="play" ng-click="">&#9658</span> 
 
      <div class="overlay"> 
 
       
 
      </div> 
 
     </div> 
 
     <img src= height="200" width="200"/> 
 
     <p style="">text heloooooooooooooooooooooooooooooooooooooooooo</p> 
 
     <p><i>text fffffffffffffffffffffffffffffffffffffffffffffffddddddddddddddsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssdddddddddddddddddddddddddddddddddddd fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff</i></p> 
 
    </div> 
 
    
 
</div> 
 
    
 
</div> 
 

 

 

 
<div class="row"> 
 
<div ng-repeat=""class="col-sm-3 album-art"> 
 
    
 
    //loop to create the boxes 
 
    <div class="thumb"> 
 
     <div class="box"> 
 
      <span class="play" ng-click="">&#9658</span> 
 
      <div class="overlay"> 
 
       
 
      </div> 
 
     </div> 
 
     <img src= height="200" width="200"/> 
 
     <p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p> 
 
     <p><i>text</i></p> 
 
    </div> 
 
    
 
</div> 
 
    
 
    <div ng-repeat=""class="col-sm-3 album-art"> 
 
    
 
    //loop to create the boxes 
 
    <div class="thumb"> 
 
     <div class="box"> 
 
      <span class="play" ng-click="">&#9658</span> 
 
      <div class="overlay"> 
 
       
 
      </div> 
 
     </div> 
 
     <img src= height="200" width="200"/> 
 
     <p style="">text helooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</p> 
 
     <p><i>text</i></p> 
 
    </div> 
 
    
 
</div> 
 
    
 
</div>

Answer 2

我测试了你做了什么，它按预期工作。您使用了1行来显示cols的完整集合，因此它们的表现与预期相同。要改变这种状况，必须强制的cols的一组，你可以做这样的：

（简历在这里： - 添加DIV CLASS =“COL-SM-12”的风格=“显示：表”和在你的“col-sm-3 divs”的4之后关闭它，为其余的“col-sm-3 div”添加另一个。 （我会每4个“col-sm-3 divs”使用两行，但是，这是你的代码） - 将“style”改为一个css，将其包含在样式表中，将该类添加到div中。结束。

.album-art { 
 
    padding-bottom: 20px; 
 
    padding-top: 20px; 
 
    margin-bottom: 10px; 
 
} 
 
.thumb { 
 
    position: relative; 
 
} 
 
.thumb .box { 
 
    position: absolute; 
 
    top: 0; 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    cursor: pointer; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Untitled Document</title> 
 
    <meta charset="UTF-8"> 
 
    <meta name="description" content=""> 
 
    <meta name="keywords" content=""> 
 
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"> 
 
    <style> 
 
    .album-art { 
 
     padding-bottom: 20px; 
 
     padding-top: 20px; 
 
     margin-bottom: 10px; 
 
    } 
 
    .thumb { 
 
     position: relative; 
 
    } 
 
    .thumb .box { 
 
     position: absolute; 
 
     top: 0; 
 
     display: block; 
 
     width: 200px; 
 
     height: 200px; 
 
     text-align: center; 
 
     text-decoration: none; 
 
     cursor: pointer; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class="row"> 
 
    <div class="col-sm-12" style="display: table;"> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">tedddddddxxxx ewhuiofhew hfiuhiufw shidfshksdhxfffffffffffffxxxxxddddddxt</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">text</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">text</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">text</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-12" style="display: table;"> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">text</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">text</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">text</p> 
 
     </div> 
 
     </div> 
 
     <div class="col-sm-3" style="padding-bottom: 20px; padding-top: 20px"> 
 
     <div class="thumb"> 
 
      <div class="box"> 
 
      <span class="play"></span> 
 
      <div class="overlay"></div> 
 
      </div> 
 
      <img src="#" height="50" width="50" /> 
 
      <p style="color: black">text</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>