html - 标题一侧的栏

Question

我想不通这个。我有一个标题 (H1) 和标题右侧的彩色条。该栏应始终覆盖标题末端和内容区域末端之间的区域。像这样的东西：

LOREM IPSUM ==================================================

LOREM IPSUM DOLOR SIT AMET ==================================

在这一点上，一切正常。HTML：

<h1>LOREM IPSUM</h1><hr/>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet.</p>

和 CSS：

h1 { float: left; margin: 0 10px 0 0; font-size: 18px; }
hr { display: block; border-top: 18px solid green; }
.clear { clear: both; }

见jsfiddle

问题是这种方法不适用于多行标题，最好有这样的东西（所以彩色条出现在最后一行）：

LOREM IPSUM DOLOR SIT AMET，CONSECTETUR ADIPISCING ELIT。

PROIN SAGITTIS DICTUM RISUS A DAPIBUS ========================

有任何想法吗？:-)

Answer 1

jsfiddle上的这种方法怎么样

HTML：

<h1><span>LOREM IPSUM<br />TEST</span></h1>
<div class="clear"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris odio magna, rhoncus sed leo et, dapibus adipiscing metus. Donec cursus dignissim ipsum sit amet suscipit.</p>

CSS：

h1 { 
    float: left; 
    margin: 0 10px 0 0; 
    font-size: 18px; 
    display:block; 
    background:green; 
    width:100%;
    padding:0;
}

h1 span {
    background:#FFF;
    padding-right:10px;
    display:inline-block;
}

.clear { clear: both; }