OpenCart ясно: оба порождают разрыв - PullRequest
Новая
       3

OpenCart ясно: оба порождают разрыв

1 голос
/ 31 марта 2012

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

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>

в .product-info .rightвы получите пустое пространство около 400 пикселей в высоту. То же самое происходит, если я пытаюсь изменить свой шаблон.

Это прекрасно работает, если я создаю 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, я не могу найти где, хотя.

edit: если я поставлю display: none;в левом столбце это не создает пробел, поэтому с левым столбцом что-то не так.

edit: Я сам нашел решение. Я исправил поплавки, перемещая правый столбец 

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

1 Ответ

1 голос
/ 31 марта 2012

Ваша 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

...