2

私はこれを理解することはできません。見出し (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 ========================

何か案は？:-)

4

1 に答える 1

0

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; }
于 2013-07-21T16:48:38.753 に答える