我正在一个由 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>
title 和 info 分别左右浮动,宽度由内容定义:
.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/