Question

我的代码如下所示。当theres 3图像一切正常时，一旦它变满，将整个div.top移动到另一行。如何让顶部的div只是开始一个新的行？

我尝试写.top width = 500px但是一旦它击中或通过它而不是内部的图像挤压在一起而不是每个150x150。我在顶部尝试了max-width而在opera和chrome中我看到top的边框为500width但是图像继续呈现通过它。（我的div有一个firefox问题所以宽度看起来固定在其他东西上。）

那么我如何让这些div进入另一排呢？而不是试图挤在一起

<div class="top">
<div><a href><img/></a></div>
<div><a href><img/></a></div>
<div><a href><img/></a></div>
</div>

Answer 1

我可能需要更多信息，很难确切地说明发生了什么。屏幕截图也许？

我可能会从这样的事情开始：

.top {
  width: 500px;
  overflow: hidden;
}

.top div {
  display: inline;
  float: left;
  width: 150px;
  height: 150px;
}

Answer 2

这是一个可能有用的解决方案（在我的示例中使用它，只是根据您的示例进行了自定义）

.top {
  display: block;
  padding: 0;
  margin: 0;
  width: 100%;
}

.top div {
    float: left;
    display: block;
    margin-right: 5px;
    margin-bottom: 10px;
    width: 47%;    /* Not needed, but in my case I needed 2 columns */      
}

Basicall，.top div float: left;是我的图片在列已满时转到下一行的原因。

如何让div在满时进入另一行？

2 个答案: