我想不通这个。我有一个标题 (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 ========================
有什么想法吗? :-)
最佳答案
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; }
关于html - 标题旁边的栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17774412/