号码/ Div重叠

我在我的网站的右上角有一个div，更新显示您的购物篮中有多少物品。如果有1位数字，则显示正常，但如果是两位数字（10,11,12等），则重叠。任何想法如何让它变得越来越宽，以显示没有重叠？号码/ Div重叠

我提供了产品页面的链接，以便人们可以添加X数量的产品和测试。

<!-- 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和前两个div？ – 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

覆盖原始定义是本地化的方式，内联样式是其中一种方式。 –

该问题源自于使用浮点数，后跟inline-block，最后是包含<div class="span4 offset4">包含块的负顶部边距的块元素。

我会做的是浮动img，#tr-basket-count和#tr-basket-title向左和应用overflow: auto父div来保持对事物的一个块格式化的内容。

请务必重置p元素的边距#tr-basket-title。

来源

2013-11-20 20:41:25

回答

相关问题