【问题标题】:How to force text outside of a div to the next line?如何将div之外的文本强制到下一行?
【发布时间】:2012-07-01 21:45:06
【问题描述】:

在开发跟踪器自定义 PHPBB BBCode 上工作,但我遇到了显示在模块旁边而不是在其下方的文本的问题。

例如:http://www.survivaloperations.net/viewtopic.php?f=2&t=4&p=5#p5 在第二个帖子中。

我想让它右边的文本默认在它下面。我努力了 display: block clear: both; adding a div surrounding the entire module with a width of 100%

但似乎没有一个工作。

这是 CSS:

.tracker_contain {
    margin: 0;
    padding: 0;
    min-width: 100%;
        clear: both;
}

#tracker_wrap {
    margin: 10px auto 0 auto;
    width: 515px;
    font-family:"Tahoma", Arial;
    font-size: 11px;
}
.tracker_top {
    padding: 8px 0 0 60px;
    background: url('http://www.survivaloperations.net/dev/images/tracker_top.png') no-repeat top;
    width: 455px;
    height: 22px;
    color: #525252;
    font-weight: bold;
    float: left;
}
.tracker_top a {
    font-weight: bold;
    text-decoration: none;
    color: #cb00cb;
}
.tracker_top a:hover {
    text-decoration: underline;
}
.tracker_body {
    padding: 10px 11px 10px 11px;
    background: url('http://www.survivaloperations.net/dev/images/tracker_bg.jpg') no-repeat top;
    width: 493px;
    color: #cb00cb;
    float: left;
}
.tracker_bottom {
    margin: 0;
    padding: 6px 11px 0 0;
    background: url('http://www.survivaloperations.net/dev/images/tracker_bottom.png') no-repeat bottom;
    width: 504px;
    height: 24px;
    text-align: right;
    color: #575757;
    float: left;
}
.tracker_bottom a {
    font-weight: bold;
    text-decoration: none;
        color: #575757;
}
.tracker_bottom a:hover {
    font-weight: bold;
    text-decoration: none;
    color: #000000;
}

这是 HTML:

<div class="tracker_contain">
<div id="tracker_wrap">
<div class="tracker_top">Originally Posted By <a href="{URL}" alt="{URL}">{TEXT}</a></div>
<div class="tracker_body">
{TEXT}
</div>
<div class="tracker_bottom"><a href={URL}" alt="Read Post" target="_Blank">Original Post</a></div>
</div>
</div>

欢迎提出任何建议!

【问题讨论】:

  • tracker_wrap之后的元素中添加clear:both

标签: html css phpbb bbcode


【解决方案1】:

您的 CSS 包含

float: left

用于顶部、主体和底部。你必须摆脱它们。

【讨论】:

  • 谢谢!我从来没有想过我尝试过的所有事情!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-07-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多