float：左移下一行div div扩展到左侧位置

看我的代码here。您需要调整“结果”面板的大小，以便至少可以查看两个内嵌块。如果你点击“More details”链接，它会显示细节，但它也会移动下一行块。float：左移下一行div div扩展到左侧位置

任何建议，为什么这是这样显示，虽然我用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; 
}

来源

2012-10-29 Prasad

这是浮动的常见问题。如果您不需要IE7支持，请使用display: inline-block; vertical-align: top;而不是float:left;。

请参阅https://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/以了解跨浏览器解决方案。

来源

2012-10-29 06:45:33 user123444555621

谢谢。这是解决方案。 – Prasad

您可以将此标记为解决方案[通过单击复选标记]（http://meta.stackexchange.com/a/5235） – user123444555621

这是因为position:relative。 Position:relative使div或块保持关系，以便下面的块向下移动。在与该下拉部分相关的地方使用position:absolute。

来源

2012-10-29 06:11:27

感谢您的回复，但我使用了相对的方式，因为我希望他们在当前块结束后立即执行位置。如果我把它做成绝对的，那么所有的块都会显示在相同的位置（或者我需要指定顶部和左侧的位置）。此代码也在循环中重复。 – Prasad

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

因此，在每两个itemStyle div后面加上<div class="clear"> </div>或者将最小高度固定为itemStyle格。

我已经在演示中每隔itemStyle个div后添加了clear类。

DEMO

来源

2012-10-29 06:13:45 Sowmya

谢谢，但您是否认为在两个块之后添加清除将限制页面在一行中仅显示两个块？而且我也不想指定任何硬编码的高度。 – Prasad

.. Live demo

嗨现在用于Even和odd规则在CSS

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

更多信息even or odd规则

来源

2012-10-29 06:35:26

谢谢rohit。这是有效的，但它的限制在页面上显示只有两个块在单行（如果宽度较低意味着较低的分辨率）在宽分辨率也显示只有两个块在行。 – Prasad

float：左移下一行div div扩展到左侧位置

回答

相关问题