0

私は、EE によって駆動されるクライアント サイトに取り組んでいます。

それらには技術文書のページがあり、それぞれにさまざまな長さのタイトルと、さまざまな長さの簡単な説明があります。この 2 つの間に、リーダー ドット付きのスペーサーが必要な設計になっています。

sPDFからのスクリーングラブ

ラインアイテムごとに、タイトルと説明用のコンテナとフローティング DIV があります。

<div class="cv-lit-lineitem">           
    <div class="cv-lit-title"><h3>Title</h3></div>
    <div class="cv-lit-linespacer"></div>
    <div class="cv-lit-info"><p>Info</p></div>
</div>

タイトルと情報はそれぞれ左と右にフロートし、幅はコンテンツによって定義されます。

.cv-lit-lineitem {
    height: 40px;
    width: 940px;
}

.cv-lit-title {
    height: 16px;
    float: left;
}

.cv-lit-linespacer {
    background-image: url("whitedots.png");
    background-repeat: repeat-x;
    height: 40px;
    display: block;
}

.cv-lit-info {
    height: 16px;
    float: right;
}

間にスペースを埋めるためにスペーサーdivを取得できないようです。100% に設定すると、コンテナーの幅全体が塗りつぶされ、それ以外はすべて幅 0 になります。

JavaScriptを使用する必要がありますか、それとも明らかなものがありませんか?

助けてくれてありがとう、

タイ

PS: ここにフィドルがあります: http://jsfiddle.net/tylonius/zC8jZ/

4

1 に答える 1

2

display:table;あなたはそれを達成することができますdisplay:table-cell;

このデモをチェック

HTML

<div class="cv-lit-lineitem">             
    <div class="cv-lit-title"><h3>Title</h3></div>
    <div class="cv-lit-linespacer"></div>
    <div class="cv-lit-info"><p>Info</p></div>
</div>​

CSS

.cv-lit-lineitem {
    height: 40px;
    width: 940px;
    display:table;
}
.cv-lit-lineitem > div {
    display:table-cell;
}   
.cv-lit-title {
    height: 16px;
}
.cv-lit-linespacer {
    background-image: url("whitedots.png");
    background-repeat: repeat-x;
    width:100%;
    height:40px;
}    
.cv-lit-info {
    height: 16px;
}​

残念ながら、これは IE8 以下では動作しません。

もう 1 つの簡単な回避策は、コンテナーの背景にドットを配置してから、タイトルと情報の背景で覆うことです。ただし、これはページの背景が単色の場合にのみ機能します。

デモ

于 2012-10-04T15:55:56.960 に答える