Question

我最近注册了一个论坛，让你用一点点CSS修改你的帖子布局，但问题是在每个帖子的底部它总是添加几个换行符和几个破折号到将您帖子的内容和签名分开。我不打算永远使用签名，我在该部分中放置的唯一内容是帖子布局的两个结束标签。我正在尝试做的是裁剪内部元素的底部，以便隐藏每个帖子下面的线条和破折号。这是我在论坛上的个人资料的链接，其中包含一个示例帖子。

http://jul.rustedlogic.net/profile.php?id=3182

请记住，我需要内部元素（.dialogue）始终垂直和水平居中。它的高度和宽度都是动态的。

编辑：背景元素的高度有问题。

＆＃13;

@import "http://fonts.googleapis.com/css?family=Amatic+SC";
.background{
  position:relative;
  background:#30619c url(http://example.com/jul/cave-bottom.gif) repeat-x bottom left;
  height:100%;
  padding:60px;
  text-align:center;
}
.background:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  background:url(http://example.com/jul/cave-top.gif) repeat-x top left;
  width:100%;
  height:131px
}
.background:after{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle
}
.dialogue{
  text-align:left;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  font-smooth:never;
  -webkit-font-smoothing:none;
  border:16px solid transparent;
  border-image:url(http://example.com/jul/yi-border.png);
  border-image-slice:16;
  border-image-repeat:repeat;
  background-color:#286048;
  padding:10px;
  font-family:'Amatic SC',monospace;
  font-size:24px;
  color:#fff;z-index:1
}
.dialogue a{
  color:#fff
}
.dialogue blockquote{
  margin:10px 0;
  padding:10px;
  background:rgba(0,0,0,0.4);
  border:none
}
.dialogue blockquote hr{
  visibility:hidden;
  margin:0
}
.dialogue blockquote font:first-child{
  font-family:'Amatic SC',monospace;
  font-size:21px
}

＆＃13;

<td valign="top" height="220" id="post3182" class="tbl font tdbg1">
  <div class="background">
    <div class="dialogue" style="overflow: hidden;">
      Sample text. 
      <blockquote>
        <font class="fonts">
          <i>Originally posted by fhqwhgads</i>
        </font>
        <hr>
        A sample quote, with a 
        <a href="about:blank">link</a>
        , for testing your layout.
        <hr>
      </blockquote>
      This is how your post will appear.
      <br><br>
      --------------------
      <br>
    </div>
  </div>
</td>

＆＃13;

Answer 1

试试这个：

.dialogue {
    overflow: hidden;
    line-height: 1.25;
}
.dialogue > br:last-child {
    display: block;
    margin-bottom: -2.5em;
}

@import "http://fonts.googleapis.com/css?family=Amatic+SC";
.background{
  position:relative;
  background:#30619c url(http://lukelogiudice.com/jul/cave-bottom.gif) repeat-x bottom left;
  height:100%;
  padding:60px;
  text-align:center;
}
.background:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  background:url(http://lukelogiudice.com/jul/cave-top.gif) repeat-x top left;
  width:100%;
  height:131px
}
.background:after{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle
}
.dialogue{
  text-align:left;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  font-smooth:never;
  -webkit-font-smoothing:none;
  border:16px solid transparent;
  border-image:url(http://lukelogiudice.com/jul/yi-border.png);
  border-image-slice:16;
  border-image-repeat:repeat;
  background-color:#286048;
  padding:10px;
  font-family:'Amatic SC',monospace;
  font-size:24px;
  color:#fff;z-index:1
}
.dialogue a{
  color:#fff
}
.dialogue blockquote{
  margin:10px 0;
  padding:10px;
  background:rgba(0,0,0,0.4);
  border:none
}
.dialogue blockquote hr{
  visibility:hidden;
  margin:0
}
.dialogue blockquote font:first-child{
  font-family:'Amatic SC',monospace;
  font-size:21px
}

.dialogue {
  overflow: hidden;
  line-height: 1.25;
}
.dialogue > br:last-child {
  display: block;
  margin-bottom: -2.5em;
}

<td valign="top" height="220" id="post3182" class="tbl font tdbg1">
  <div class="background">
    <div class="dialogue" style="overflow: hidden;">
      Sample text. 
      <blockquote>
        <font class="fonts">
          <i>Originally posted by fhqwhgads</i>
        </font>
        <hr>
        A sample quote, with a 
        <a href="about:blank">link</a>
        , for testing your layout.
        <hr>
      </blockquote>
      This is how your post will appear.
      <br><br>
      --------------------
      <br>
    </div>
  </div>
</td>

Answer 2

以下至少适用于FF，Chrome和IE8：

.dialogue {
    line-height: 1.25;
    overflow: hidden;
}
.dialogue:after {
    content: '';
    display: block;
    margin-bottom: -2.5em;
}

@import "http://fonts.googleapis.com/css?family=Amatic+SC";
.background{
  position:relative;
  background:#30619c url(http://lukelogiudice.com/jul/cave-bottom.gif) repeat-x bottom left;
  height:100%;
  padding:60px;
  text-align:center;
}
.background:before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  background:url(http://lukelogiudice.com/jul/cave-top.gif) repeat-x top left;
  width:100%;
  height:131px
}
.background:after{
  content:'';
  display:inline-block;
  height:100%;
  vertical-align:middle
}
.dialogue{
  text-align:left;
  position:relative;
  display:inline-block;
  vertical-align:middle;
  font-smooth:never;
  -webkit-font-smoothing:none;
  border:16px solid transparent;
  border-image:url(http://lukelogiudice.com/jul/yi-border.png);
  border-image-slice:16;
  border-image-repeat:repeat;
  background-color:#286048;
  padding:10px;
  font-family:'Amatic SC',monospace;
  font-size:24px;
  color:#fff;z-index:1
}
.dialogue a{
  color:#fff
}
.dialogue blockquote{
  margin:10px 0;
  padding:10px;
  background:rgba(0,0,0,0.4);
  border:none
}
.dialogue blockquote hr{
  visibility:hidden;
  margin:0
}
.dialogue blockquote font:first-child{
  font-family:'Amatic SC',monospace;
  font-size:21px
}
.dialogue {
    line-height: 1.25;
    overflow: hidden;
}
.dialogue:after{
  content: '';
  display:block;
  margin-bottom: -2.5em;
}

<td valign="top" height="220" id="post3182" class="tbl font tdbg1">
  <div class="background">
    <div class="dialogue" style="overflow: hidden;">
      Sample text. 
      <blockquote>
        <font class="fonts">
          <i>Originally posted by fhqwhgads</i>
        </font>
        <hr>
        A sample quote, with a 
        <a href="about:blank">link</a>
        , for testing your layout.
        <hr>
      </blockquote>
      This is how your post will appear.
      <br><br>
      --------------------
      <br>
    </div>
  </div>
</td>

用动态高度切断元素的底部

2 个答案: