查看我的代码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;
}
答案 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中的Even
和odd
规则
.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/。