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

我似乎无法让间隔div填充其间的空间。将其设置为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