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

Question

我刚刚下载了日期功能区标题我的帖子的 CSS 布局。问题是当发布消息太少时，下一条色带会放错地方。如果消息足够大，功能区会留在正确的位置(在前一个功能区下方)。 CSS 代码是:

#newsmain{
        background: #f9f9f9;
        font-family: Georgia, "Times", "Times New Roman", serif;
        color: #999;
      }

.ribbon {
   margin: 0.25em 1em 1em 0;
   background: #fff;
   float: left;
   position: relative;
   color: #f9f9f9;
 }
 .ribbon .top,
 .ribbon .middle {
   background: #833;
   padding: 0.1em 0.2em;
   border-bottom: 1px solid #f9f9f9;
   text-align: center;
   -moz-box-shadow: 2px 4px 7px #d9d9d9;
   -webkit-box-shadow: 2px 4px 7px #d9d9d9;
   box-shadow: 2px 4px 7px #d9d9d9;
 }
 .ribbon .middle { border: 0; }
 .ribbon .tail {
   height: 0.5em; width: 100%;
   position: absolute;
   bottom: -0.5em;
   left: 0;
   overflow: hidden; 
 }
 .ribbon .tail .right,
 .ribbon .tail .left {
   position: absolute; height: 1em; width: 100%;
   background: #833;
   bottom: 0.5em;
   -webkit-transform: skew(0deg, -20deg);
   -moz-transform: skew(-0deg, -20deg);
   -o-transform: skew(-0deg, -20deg);
   -ms-transform: skew(-0deg, -20deg);
   transform: skew(-0deg, -20deg);
   -moz-box-shadow: 1px 1px 3px #ccc;
   -webkit-box-shadow: 1px 1px 3px #ccc;
   box-shadow: 1px 1px 3px #ccc;
 }
 .ribbon .tail .right {
   -webkit-transform: skew(0deg, 20deg);
   -moz-transform: skew(-0deg, -20deg);
   -o-transform: skew(-0deg, -20deg);
   -ms-transform: skew(-0deg, -20deg);
   transform: skew(-0deg, -20deg);
 }

测试问题的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>

我希望你们中的一些人(CSS 领域的专家 :D)可以帮助我，因为我是初学者。 谢谢。

Answer 1

我不完全确定您正在寻找什么布局，但使用 CSS clear属性:

clear: left;

当我将它添加到 .ribbon 时有效。

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

此外:您可能想用另一个 div 包装您的“功能区”和消息，以将它们放在同一个整体框中。