Question

http://demo.opencart.com/index.php?route=product/product&product_id=42

enter image description here

如果您使用firebug或chrome的inspect元素并插入此代码

<div style="background:blue;width:100px;height:100px;float:left;"></div>
<div style="background:green;width:100px;height:100px;float:right;"></div>
<div style="clear:both;"></div>

在.product-info。中你得到一个400px高度的空白区域。如果我尝试修改我的模板，就会发生这种情况。

如果我创建一个html文档并粘贴相同的代码

，它可以正常工作

<html>
test<br />

<div style="background:blue;width:100px;height:100px;float:left;"></div>
    <div style="background:green;width:100px;height:100px;float:right;"></div>
    <div style="clear:both;"></div>

    test again
</html>

问题显然是在opencart的某个地方，但我无法找到它。

编辑：如果我把display：none;在列左侧，它不会产生间隙，因此列左侧有问题。

编辑：我自己找到了解决方案。我通过右浮列

修复了浮点数

.product-info .right {
float:right;
width:470px;
margin:0;
}

Answer 1

您的HTML结构应该是这样的

<div class="right">

<div style="overflow: hidden; margin-bottom: 10px;">
  <div style="background:blue;width:100px;height:100px;float:left;"></div>
  <div style="background:green;width:100px;height:100px;float:right;"></div>
</div>


  <div style="" class="description"> <!-- remove the style clear:both -->
    <span>Brand:</span> <a href="http://demo.opencart.com/index.php?route=product/manufacturer/product&amp;manufacturer_id=8">Apple</a><br>
    <span>Product Code:</span> Product 15<br>
    <span>Reward Points:</span> 100<br>
    <span>Availability:</span> In Stock
  </div>

......
your remaining divs goes here
.....

</div>

屏幕截图：

enter image description here

opencart clear：两者都产生了差距

1 个答案: