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

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

有一个

...。如果您删除 class 属性，它对我来说看起来不错。