DIV не остается внутри другого DIV - PullRequest
2 голосов
/ 18 февраля 2012

Я боролся с этим вопросом в течение часа, и я вообще ничего не добился, вот и я.

Проблема, с которой я сталкиваюсь, заключается в том, что у меня есть 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&amp;path=74&amp;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&amp;path=74&amp;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 и как это исправить?

Ответы [ 4 ]

0 голосов
/ 18 февраля 2012

Страница , на которую вы ссылались , имеет разный макет, чем тот, который вы опубликовали.Есть два DIV.A div.left и div.right.Ваша цена указана с пометкой «слева» ... поэтому она идет налево, а не направо.Простое перемещение решит проблему.

Код с этой страницы выглядит примерно так.(После исправления.)

<div class="right">
  <div class="price">
    1 033,00€
  </div>

  <div class="cart">
    <a class="button" onclick="addToCart('51');"><span>Lisää koriin</span></a>
  </div>

  <div class="wishlist">
    <a onclick="addToWishList('51');">Lisää toivelistaan</a>
  </div>

  <div class="compare">
    <a onclick="addToCompare('51');">Lisää vertailuun</a>
  </div>
</div>

<div class="left">
  <div class="image">
    <a href=
    "http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;product_id=51">
    <img alt="Intel Core i7-3960X 3,3GHz Prosessori - LGA2011" title=
    "Intel Core i7-3960X 3,3GHz Prosessori - LGA2011" src=
    "http://haavistu.eu/shop/image/cache/data/prosessorit/Intel%20Core%20i7-3960X%203,3GHz%20-%20LGA2011-80x80.jpg"></a>
  </div>

  <div class="name">
    <a href=
    "http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;product_id=51">
    Intel Core i7-3960X 3,3GHz Prosessori - LGA2011</a>
  </div>

  <div class="description">
    The 2nd generation Intel Core i7-3960X Processor Extreme Edition is super-smart,
    ultra-threaded, ..
  </div>
</div>
0 голосов
/ 18 февраля 2012

Глядя на исходный код вашего живого примера, он не отражает того, что указывает ваш вопрос:

<div>
<div class="right">
    <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 class="left">
    <div class="image">
        <a href="http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;product_id=50"><img src="http://haavistu.eu/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="price">198,00€</div>
    <div class="name">
        <a href="http://haavistu.eu/shop/index.php?route=product/product&amp;path=74_61&amp;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>

Цена указана в осталось div, видите?

0 голосов
/ 18 февраля 2012

Самый простой способ сделать это с тем, что у вас есть сейчас, это добавить несколько правил к вашему .product-list .price селектору.

.product-list .price {
  color: #333333;
  font-size: 16px;
  font-weight: bold;
  position: relative; /* this is new */
  right: -85px;       /* this is new */
}

Однако, вероятно, было бы лучше, если бы цена была в документепрямо перед кнопкой оформления заказа, а не там, где она есть сейчас.

0 голосов
/ 18 февраля 2012

Используйте overflow: hidden; в родительском

...