Question

在这个页面上，我构建了一个CSS Ribbon标题，其背景中设置了文本/图标。

这些集合将在页面上复制，横幅仅在一组中完美，但在我尝试创建一个正好低于背景的div后，覆盖了整个部分。

HTML：

<div>


<p class="paddingbottom"><span class="bold">WHO ARE THEY? </span> Deborah is an active member of Golden Seeds a nation-wide angel investor network that provides early stage and growth capital to women-led and women-owned companies across all sectors.  During summer 2010, Jamie interned for Golden Seeds and learned how entrepreneurial ventures are funded in a collaborative environment where women’s potential for economic growth is actualized.</p>

<p>.If you are an accredited investor interested in joining Golden Seeds, please click here.</p>
</div>

</div>
<div class="clear"></div>


<div>
<p class="headerorg"><span class="shiftorg">Golden Seed </span> <span class="right"><span class="whitetitle">Website:  <a href="http://www.goldenseeds.com/">goldenseeds.com</a></span><a href="#"><img src="" alt="facebook"/></a><a href="#"><img src="http://jumpthru.net/newsite/wp-content/themes/twentyten/images/other/twitter.png" alt="twitter"/></a></span></p>


<img src="" />
<div class="leftcolorg">

<p class="paddingbottom"><span class="bold">WHO ARE THEY? </span> Deborah is an active member of Golden Seeds a nation-wide angel investor network that provides early stage and growth capital to women-led and women-owned companies across all sectors.  During summer 2010, Jamie interned for Golden Seeds and learned how entrepreneurial ventures are funded in a collaborative environment where women’s potential for economic growth is actualized.</p>

<p>WHY ARE THEY IN OUR NETWORK?JumpThru collaborates with Golden Seeds to help increase the number of women-led tech companies that get the support and funding they need to grow.  Advise on tech deals, collaborate on educational programming.If you are an entrepreneur seeking funding, please click here for the application to Golden Seeds’ program. 

If you are an accredited investor interested in joining Golden Seeds, please click here.</p>
</div>

</div>
<div class="clear"></div>

CSS：

.headerorg {
        position: relative;
        color: #fff;
        font-style:italic;
        text-transform:uppercase;
        margin: 0 0 20px -15px;
        padding: 1px 0 2px;
        background: #ff9900;
        }


.headerorg a {
    color:#FFF;
}


.headerorg:before
    {
        content: '';
        position: absolute;
        border-style: solid;
        border-color: transparent;
        bottom: -8px;
    }

.headerorg:before
    {
        border-width: 0 10px 10px 0;
        border-right-color: #8b5f1d;
        left: 0;
    }


.shiftorg {
    padding-left: 15px;
    background-position: 5px 50%;
    background-image: url();
    background-repeat:no-repeat;
}

Answer 1

问题是您的浮动清算无效。

要实现浮动清算，您使用的是：

<div class="clear"></div>

这是一种可靠的原始方法。

问题在于您的CSS（第321行，style.css ）：

.clear {
    :both;
}

应该是：

.clear {
    clear: both;
}

您显然对您的class和该属性都命名为clear这一事实感到困惑。

Answer 2

有一个<p class="headerorg">...。如果您删除class属性，它对我来说很好。

如何在复制时阻止此CSS横幅溢出？

2 个答案: