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）可以帮助我，因为我是初学者。感谢＆＃39; S

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包装在一起，以使它们保持在同一个整体框中。

CSS Date Ribbon在错误的地方

1 个答案: