動態空間填充DIV寬度

Question

我正在EE驅動的客戶端網站上工作。

他們有一個技術文件頁面，每個頁面都有不同長度的標題以及不同長度的簡要說明。在兩者之間，他們的設計與領導點的間隔來電：

對於每個行項目，我有一個容器，併爲標題浮動的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; 
} 

我似乎無法獲得spacer div到f在中間的空間。將其設置爲100％將填充整個容器寬度，其他所有內容的寬度爲0.

我是否需要使用JavaScript，或者我是否缺少明顯的東西？

感謝您的幫助，

TY

PS：這裏有一個小提琴：http://jsfiddle.net/tylonius/zC8jZ/

Answer 1

您可以display:table;和display:table-cell;

Check this demo

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及以下工作。

---

另一個簡單的解決方法是將點放在容器的背景中，然後用標題和信息背景覆蓋它。但是這隻有在你有單色頁面背景時纔有效。

Demo