float:展开时左移下一行div块到左边的位置

时间:2012-10-29 05:57:43

标签: javascript html css

查看我的代码here。 您需要调整“结果”面板的大小,以便至少可以查看两个内联块。如果您单击“More details”链接,它将显示详细信息,但它也将移动下一行阻止。

虽然我使用了clear:both,但有任何建议为什么会这样显示。

.reviewimg_blk {
    border: 1px solid #9B9B9B;
    float: left;
    margin-bottom: 15px;
    margin-right: 15px;
    margin-top: 15px;
    padding: 5px 5px 5px 10px;
    position: relative;
    width: 395px;
}

4 个答案:

答案 0 :(得分:0)

这是因为position:relative而发生的。 Position:relative将div或块保持在一个关系中,以便下面的块向下移动。请在与该下拉列表部分相关的位置使用position:absolute

答案 1 :(得分:0)

这是因为你的第一个itemStyle div有更多内容,所以它比其他div更高。

所以在每两个<div class="clear"> </div> div之后添加itemStyle或将min-height固定到itemStyle div。

我在演示中每两个clear div后添加了itemStyle课程。

<强> DEMO

答案 2 :(得分:0)

... <强> Live demo

您好已经习惯了css中的Evenodd规则

.itemStyle:nth-child(odd) {
clear:left;
    float:left;
}

更多信息even or odd规则

答案 3 :(得分:0)

这是花车的常见问题。

如果您不需要IE7支持,请使用display: inline-block; vertical-align: top;代替float:left;

有关跨浏览器的解决方案,请参阅https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/