0

目标是在不每三个div添加任何html标签（div，hr，...）的情况下达到这个效果。

这意味着仅通过 css。

我认为一个想法是将 line-height 设置为 150px 并在其下划线。但它似乎没有产生结果。

带下划线的 div

我现在使用的 css 产生的结果没有下划线：

.projectContainer{
    /*line-height:150px;
    text-decoration:underline;*/
}
.projectBlock{
    position:relative;
    display:block;
    float:left;
    width:200px;
    height:150px;
}
.projectImage{
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
    height:112px;
    background-size:contain;
    background-position:0% 50%; 
    background-repeat:no-repeat;
}
.projectCaptcha{
    position:absolute;
    top:113px;
    left:0px;
    width:200px;
    height:88px;
    font-size:12px;
}

html是一个列表：

<div class="projectBlock">
    <div class="projectImage" style='background-image:url(...)'></div>
    <div class="projectCaptcha">MUSÉE RATH, GENEVE MAURICE BRAILLARD</div>
</div>

在一个：

<div class="projectContainer">
     ...
</div>

如果评论被删除，结果不是计划好的：

搞砸了css

谢谢你，对不起我的英语！

4

3 回答 3

3

听起来你可以添加一个border-bottomto .projectBlock。

.projectBlock {
  border-bottom: 1px solid black;
  ...
}

您可能需要在上方和下方添加一些边距和填充以使间距正确。

于 2013-08-27T17:31:06.250 回答
1

您可以只使用边框属性，如果您只想选择某些 div 使用 nth-child(an+b) 伪类。

于 2013-08-27T17:31:37.033 回答
0

小提琴 我认为你需要清除每个容器的浮动。

.projectContainer{
    height:150px;
    border-bottom:1px solid #777;
    clear:both;
}
于 2013-08-27T17:36:00.920 回答