私は、EE によって駆動されるクライアント サイトに取り組んでいます。
それらには技術文書のページがあり、それぞれにさまざまな長さのタイトルと、さまざまな長さの簡単な説明があります。この 2 つの間に、リーダー ドット付きのスペーサーが必要な設計になっています。
ラインアイテムごとに、タイトルと説明用のコンテナとフローティング 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/