下划线左浮动div

Question

目标是在不添加任何html标记（div，hr，...）的情况下实现此效果，每三个div。

这意味着仅通过 css 。

我认为这是一个想法是将行高设置为150px并加下划线。 但它似乎没有产生结果。

我现在使用的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>

in a：

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

如果删除评论，则结果不是计划内容：

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

Answer 1

听起来你可以向border-bottom添加.projectBlock。

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

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

Answer 2

您可以使用border属性，如果您只想选择某些div，请使用nth-child（an + b）伪类。

Answer 3

Fiddle 我想你需要清除每个容器的浮子。

.projectContainer{
    height:150px;
    border-bottom:1px solid #777;
    clear:both;
}