Opencart的明确：既产生差距

http://demo.opencart.com/index.php?route=product/product&product_id=42 Opencart的明确：既产生差距

enter image description here

如果你使用Firebug，或者Chrome的检查元素插入此代码

<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>

中。产品-信息.right你得到一个大约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的地方它工作得很好，我找不到在哪里，虽然。

编辑：如果我把显示：无;在列左侧不会产生间隙，所以列左侧有问题。

编辑：我找到了解决办法我自己。我固定浮标浮右列

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

来源

2012-03-31 Tomas

亲爱的看到我的回答，并让我知道我是否落后于某个地方。 – w3uiguru 2012-03-31 19:30:47

你的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

来源

2012-03-31 19:30:12 w3uiguru

Opencart的明确：既产生差距

回答

相关问题