Подчеркнутые левые плавающие divs

Question

Цель состоит в том, чтобы достичь этого эффекта, не добавляя ни одного html-тега (div, hr, ...) каждые три div.

Это значение через css только.

Я думал, что идея состоит в том, чтобы установить высоту линии до 150 пикселей и подчеркнуть ее. Но это, похоже, не дает результата.

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> 

в A:

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

Если комментарий будет удален результат не то, что было запланировано:

Спасибо и извините за мой английский!

Answer 1

Похоже, вы могли бы просто добавить border-bottom в .projectBlock.

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

Возможно, вам потребуется добавить некоторый запас и прокладку сверху и снизу, чтобы получить правильный интервал.

Answer 2

Вы можете просто использовать свойство border, и если вы хотите только выбрать определенные divs, используйте псевдо-класс nth-child (a + b).

Answer 3

Fiddle Я думаю, вам нужно очистить поплавки для каждого контейнера.

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