溢出时向下移动 div 行

Question

我在网站中创建了动态 div 框，我想使用引导程序在每行中有 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;
}

基本上我需要的是，当文本溢出并创建新行时，当前行下方的行向下移动，而不是将每个元素都向右移动。问题似乎出在“专辑艺术”中类，因为我删除了所有其他类，问题仍然存在。

谢谢

编辑：我添加了图片以获得更好的解释

这是一切正常的时候

但是当文字较长时

EDIT2：我在这里举了一个例子：jsfiddle.net/qgo7a701 您可能需要将结果区域向左扩展才能看到每行 4 个方格

Answer 1

我不太明白你的问题，但在引导程序中，行分为 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" style="display: table" 并在 4 个“col-sm-3 divs”之后将其关闭。为“col-sm-3 divs”的其余部分添加另一个。一切都应该在 div class="row" 内。 （我会每 4 个“col-sm-3 div”使用两行，但是，是你的代码）。 - 将 "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>