0

我正在一个由 EE 驱动的客户站点上工作。

他们有一页技术文件，每一个都有不同长度的标题，以及不同长度的简短描述。在两者之间，他们的设计需要一个带前导点的垫片：

s 从 PDF 中抓取屏幕

对于每个行项目，我都有一个容器和浮动 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/

4

1 回答 1

2

display:table;你可以用和来实现它display:table-cell;

检查这个演示

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 及更低版本。

另一个简单的解决方法是将点放在容器的背景中，然后用标题和信息的背景覆盖它。但这仅在您具有单色页面背景时才有效。

演示

于 2012-10-04T15:55:56.960 回答