CSS日期功能区位于错误的位置

我刚刚下载了一个日期功能区标题的CSS布局。问题是，当post消息太少时，下一个功能区会出现错误的位置。如果邮件足够大，功能区将保留在正确的位置（上一个功能区的下方）。CSS代码是：

#新闻主播{
背景#f9f9f9；
字体系列：佐治亚州，“泰晤士报”，“泰晤士报新罗马”，衬线；
颜色：#999；
}
.丝带{
利润率：0.25em 1em 1em 0；
背景：#fff；
浮动：左；
位置：相对位置；
颜色：#f9f9f9；
}
.ribbon.顶部，
.丝带，中间{
背景:#833；
填料：0.1米0.2米；
边框底部：1px实心#f9f9f9；
文本对齐：居中；
-moz盒阴影：2px4px7px#d9d9d9；
-网络工具包盒阴影：2px4px7px#d9d9d9；
盒影：2px4px7px#d9d9d9；
}
.ribbon.middle{边框：0；}
.丝带.尾巴{
高度：0.5em；宽度：100%；
位置：绝对位置；
底部：-0.5em；
左：0；
溢出：隐藏；
}
.丝带.尾巴.对，
.丝带.尾巴.左边{
位置：绝对；高度：1米；宽度：100%；
背景:#833；
底部：0.5em；
-webkit变换：倾斜（0度，-20度）；
-moz变换：倾斜（-0度，-20度）；
-o变换：倾斜（-0度，-20度）；
-ms变换：倾斜（-0度，-20度）；
变换：倾斜（-0度，-20度）；
-莫兹盒阴影：1px 1px 3px#ccc；
-网络工具包盒阴影：1px 1px 3px#ccc；
盒影：1px 1px 3px#ccc；
}
.丝带.尾巴.对{
-webkit变换：倾斜（0度、20度）；
-moz变换：倾斜（-0度，-20度）；
-o变换：倾斜（-0度，-20度）；
-ms变换：倾斜（-0度，-20度）；
变换：倾斜（-0度，-20度）；
}

用于测试问题的HTML代码是：

<div class="ribbon">
                <div class="top">May</div>
                <div class="middle">28</div>
                <div class="tail">
                <div class="left"></div>
                <div class="right"></div>
                </div>
                </div>
                <p id="newsmain" align="justify"> Little Message</p>

<div class="ribbon">
                <div class="top">May</div>
                <div class="middle">28</div>
                <div class="tail">
                <div class="left"></div>
                <div class="right"></div>
                </div>
                </div>
                <p id="newsmain" align="justify"> Large Message so the ribbon below are in the right place...............................................................................................................</p>

<div class="ribbon">
                <div class="top">May</div>
                <div class="middle">28</div>
                <div class="tail">
                <div class="left"></div>
                <div class="right"></div>
                </div>
                </div>
                <p id="newsmain" align="justify"> This ribbon is in the right place, like the ribbon above should be.</p>

也许
28
小消息
也许
28
大消息，使下面的功能区位于正确的位置
也许
28
此功能区位于正确的位置，就像上面的功能区一样

我希望你们中的一些人（CSS领域的专家：D）能帮助我，因为我是初学者。

---

谢谢。

我不完全确定您要找的布局，但使用CSS属性：

clear: left;

当我将它添加到

.ribbon

时，它工作正常

.ribbon {
   margin: 0.25em 1em 1em 0;
   background: #fff;
   float: left;
   clear: left;
   position: relative;
   color: #f9f9f9;
 }

---

此外：您可能希望用另一个div包装您的“Ribbon”和消息，以使它们保持在同一个整体框中。

Nice！谢谢你快速的回答：）我很高兴，你的问题问得很好。