Я боролся с этим вопросом в течение часа, и я вообще ничего не добился, вот и я.
Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть div, который просто не остается внутри другого.
Вот картинка, объясняющая, что у меня есть и чего я хочу:
http://www.upload.ee/image/2086206/whatiwant.jpg
Живая версия: http://haavistu.eu/shop/index.php?route=product/category&path=74_61
Что я сделал до сих пор:
Я поместил код генерации цены и все кнопки внутри div
, классифицированного stuffholder
. Затем я пропустил div stuffholder
вправо.
Я думал, что все готово, но то, что у меня есть, видно из картинки.
Весь соответствующий код:
<div class="product-list">
<?php foreach ($products as $product) { ?>
<div>
<div class="image">
<?php if ($product['thumb']) { ?>
<a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" title="<?php echo $product['name']; ?>" alt="<?php echo $product['name']; ?>" /></a>
<?php } ?>
<?php if ($product['rating']) { ?>
<img src="catalog/view/theme/default/image/stars-<?php echo $product['rating']; ?>.png" alt="<?php echo $product['reviews']; ?>" />
<?php } ?>
</div>
<div class="stuffholder">
<?php if ($product['price']) { ?>
<div class="price">
<?php if (!$product['special']) { ?>
<?php echo $product['price']; ?>
<?php } else { ?>
<span class="price-old"><?php echo $product['price']; ?></span> <span class="price-new"><?php echo $product['special']; ?></span>
<?php } ?>
</div>
<?php } ?>
<div class="cart">
<a onclick="addToCart('<?php echo $product['product_id']; ?>');" class="button"><span><?php echo $button_cart; ?></span></a>
</div>
<div class="wishlist">
<a onclick="addToWishList('<?php echo $product['product_id']; ?>');"><?php echo $button_wishlist; ?></a>
</div>
<div class="compare">
<a onclick="addToCompare('<?php echo $product['product_id']; ?>');"><?php echo $button_compare; ?></a>
</div>
</div>
<div class="name"><a href="<?php echo $product['href']; ?>"><?php echo $product['name']; ?></a></div>
<div class="description"><?php echo $product['description']; ?></div>
</div>
<?php } ?>
</div>
Извините за ужасные намерения. Часть изображения, имени и описания работает нормально.
Вот CSS
.product-list > div {
overflow: auto;
}
.product-list .right {
float: right;
}
.product-list .image {
float: left;
}
.product-list .image a {
display: block;
}
.product-list .image img {
display: block;
}
.product-list .stuffholder {
display: block;
float: right;
}
.product-list .price {
}
.product-list .price-old {
display: block;
}
.product-list .wishlist a {
display: block;
}
.product-list .compare a {
display: block;
}
Удалил полностью ненужные вещи.
Когда я смотрю исходный код, который все это создает, я вижу:
<div>
<div class="image"><a href="xxx/shop/index.php?route=product/product&path=74&product_id=50"><img src="xxx/shop/image/cache/data/prosessorit/Core-i5-2500K-and-Core-i7-2600K-Review-614x614-80x80.jpg" title="Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155" alt="Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155" /></a>
<img src="catalog/view/theme/default/image/stars-5.png" alt="Perustuu 1 arvioon." />
</div>
<div class="name"><a href="xxx/shop/index.php?route=product/product&path=74&product_id=50">Intel Core i5-2500K 3,3Ghz Prosessori - LGA1155</a></div>
<div class="description">
Intel’s most popular family member is more adaptable than ever and unlocked. The 2nd generation..</div>
<div class="stuffholder">
<div class="price">198,00€</div>
<div class="cart">
<a onclick="addToCart('50');" class="button"><span>Lisää koriin</span></a>
</div>
<div class="wishlist">
<a onclick="addToWishList('50');">Lisää toivelistaan</a>
</div>
<div class="compare">
<a onclick="addToCompare('50');">Lisää vertailuun</a>
</div>
</div>
</div>
В соответствии с исходным кодом, все это должно работать хорошо. Может кто-нибудь сказать мне, когда div price
не остается внутри div stuffholder
и как это исправить?