溢出

Question

我在网站上创建了动态div框，我希望每行有4个框使用bootstrap，它们正在工作，但每个框底部都有一些文本，问题是当文本是太长了它会创建一个新的行，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;
}

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

感谢

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

这是一切正常的时候

但是当文字更长时

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”style =“display：table”并在“ col-sm-3 divs ”之后关闭它。为“ col-sm-3 divs ”的其余部分添加另一个。一切都应该在 div class =“row”里面。 （我会每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>