Number/Div Overlapping

У меня есть div в верхнем правом углу моего веб-сайта, который обновляет количество элементов в вашей корзине. Если есть 1 цифра, она показывает штраф, однако, если это двойные цифры (10,11,12 и т. Д.), Она перекрывается. Любая идея, как заставить его просто расшириться, чтобы показать, не перекрывая друг друга?Number/Div Overlapping

Я предоставил ссылку на страницу продукта, чтобы люди могли добавить X количество продуктов и тест.

http://bit.ly/17oT6Jo

<!-- Live Basket (Top Right) --> 
      <div id="tr-basket"> 
       <div class="span4 offset4"> 
        <img src="<?php echo HTTP_HOST; ?>img/basket-icon.png" class="tr-shopping-basket-icon" /> 
        <div id="tr-basket-count"><?php echo number_format($basket->basketCount()); ?></div> 
        <div id="tr-basket-title"> 
        <p>ITEM<?php if($basket->basketCount()!=1){ ?>S<?php } ?> IN YOUR BASKET<br /> 
         <a href="<?php echo HTTP_HOST; ?>Basket"><span class="label label-info">VIEW</span> 
         <span class="label label-info">CHECKOUT</span></a> 
         <!-- <a href="<?php echo HTTP_HOST; ?>Site/MyAccount"><span class="label label-success">ACCOUNT</span></a> --> 
        </p> 
        </div> 

       </div> 
      </div> 
      <!-- End Live Basket -->

CSS

#tr-basket-count { 
    display: inline-block; 
    font-size: 5.5em; 
    color: #ef798d; 
    margin-top: 25px; 
} 

#tr-basket-title p { 
    display: block; 
    margin-top: -55px; 
    margin-left: 100px; 
    color: #82bdc8; 
    font-weight: bold; 
} 

#tr-basket-buttons { 
    display: block; 
    margin-left: 100px; 
    margin-top: 0px; 
}

источник

2013-11-20 JordanC26

Вы можете предоставить css для остальных элементов, таких как img и первые два divs? – brouxhaha

Попробуйте это:

#tr-basket-title 
{ 
    float: right; 
}

Добавить float: right к этому элементу: <div class="span4 offset4" style="float: right; margin-left: 0"></div>

Example

источник

2013-11-20 20:41:15 Tomzan

Он использует Bootstrap, поэтому настройка '.span4' и' .offset4' вызовет другие проблемы. –

Проверьте редактирование, не меняя классы – Tomzan

Первым делом является локальное определение исходного определения, а встроенные стили - это один из способов его выполнения. –

Проблема связана с комбинацией использования поплавка, а затем встроенным блоком и, наконец, блочным элементом с отрицательным верхним краем, все внутри блока, содержащего <div class="span4 offset4">.

Что бы я сделать, это плавать img, #tr-basket-count и #tr-basket-title к левой и применять overflow: auto для родительского DIV, чтобы держать вещи в одном контексте форматирования блока.

Обязательно сбросьте поля на p в #tr-basket-title.

источник

2013-11-20 20:41:25

Number/Div Overlapping

ответ

Смежные вопросы