Как воспроизвести этот эффект макета с помощью css?
Кроме создания таблицы 7 столбцов / 3 строк с изображением 1 пикселя, которое может быть расширено для имитации линий, как можно воспроизвести этот макет с помощью HTML и CSS без таблицы или изображения для "разделителей"?
Что мне действительно нравится, так это то, что линии не пересекаются.
<!-- layout reproduced -->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR ALIGN="center">
<TD CLASS="boldedcolor4text">the first</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the second</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the third</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the fourth</TD>
</TR>
<TR ALIGN="center">
<TD COLSPAN="7"><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="520" HEIGHT="1"></TD>
</TR>
<TR ALIGN="center">
<TD><A CLASS="image" HREF="><IMG SRC="1.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="2.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="3.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="4.jpg" ALT="" BORDER="0"></A></TD>
</TR>
</TABLE>
2 ответа:
Можно попробовать так: https://jsfiddle.net/wh48rjvt/
SCSS:
$border: 1px solid grey; .table-row { border-bottom: $border; &:last-child { border-bottom: 0; } .table-box { border-right: $border; margin: 0.75rem 0; &:last-child { border-right: 0; } } }
Это делает следующий CSS:
.table-row { border-bottom: 1px solid grey; } .table-row:last-child { border-bottom: 0; } .table-row .table-box { border-right: 1px solid grey; margin: 0.75rem 0; } .table-row .table-box:last-child { border-right: 0; }
HTML:
<div class="container"> <div class="table-row row"> <div class="table-box col-xs-3">1</div> <div class="table-box col-xs-3">2</div> <div class="table-box col-xs-3">3</div> <div class="table-box col-xs-3">4</div> </div> <div class="table-row row"> <div class="table-box col-xs-3">5</div> <div class="table-box col-xs-3">6</div> <div class="table-box col-xs-3">7</div> <div class="table-box col-xs-3">8</div> </div> ... </div>
И я использовал Bootstrap для сетки.
Никаких зависимостей для моего решения. Я создаю flexbox
.container
, а затем четыре flex.item
s. направление по умолчанию для flexbox -row
, что мы хотим для внешнего макета, но не для содержимого каждого элемента в строке. Чтобы настроить это, я изменилflex-direction
детей (.item
) наcolumn
, так как в вашем примере изображения укладываются под якорями.Для неразрывной границы между якорями и изображениями я взял немного ярлыка и переместил стили в псевдокласс. Обратите внимание на
position: relative;
на.item
. Это было сделано, чтобы создать безопасный контейнер, в котором будут храниться абсолютно позиционированные псевдоклассовые границы.
.container, .item { display: flex; } .item { flex-direction: column; position: relative; } .item:before { content: ''; border-top: 1px solid; position: absolute; width: 100%; top: 2em; } .item:first-child:before { left: 1.5em; } .item:last-child:before { left: -1.5em; } .item:last-child .link, .item:last-child .img { border-right: none; } .link, .img { border-right: 1px solid; } .link { text-align: center; } .img { margin-top: 2em; padding: 0.5em 1em 0.5em; }
<div class="container"> <div class="item"> <a class="link" href="">link 1</a> <img class="img" src="http://placehold.it/100x130" alt="" /> </div> <div class="item"> <a class="link" href="">link 2</a> <img class="img" src="http://placehold.it/100x130" alt="" /> </div> <div class="item"> <a class="link" href="">link 3</a> <img class="img" src="http://placehold.it/100x130" alt="" /> </div> <div class="item"> <a class="link" href="">link 4</a> <img class="img" src="http://placehold.it/100x130" alt="" /> </div> </div>
Скрипка: https://jsfiddle.net/1sbx2h5e/