流划分成行

Question

我试图让这些DIV以两个为一组从左向右“流动”，然后对于每一个奇数，在我的客户端的Joomla网站中创建一个新行（在此处http://centralcat.socialhippo.com/services/available-for-adoption.html 我有前两个工作，但当第三个渲染时，它向右移动而不是浮动到左边。 我没有和CSS结婚，所以如果有更好的方式（列表等），我会试一试。

Answer 1

只需向#cat2adopt添加高度即可快速解决此问题。只需确保高度足以容纳内容。当你浮动不同高度的div时会出现这个“问题”。

你也应该在这里使用类，因为ID必须是唯一的。

例如：

.cat2adopt { /* class="cat2adopt" */
    clear: right; /* don't really need this I don't think */
    float: left;
    height: 300px; /* added this */
    margin-bottom: 20px;
    margin-right: 20px;
    position: relative;
    text-align: center;
    width: 400px;
}