动态空间填充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