Sposób na odtworzenie tego efektu układu za pomocą css?

Question

Skrót od utworzenia tabeli z 7 kolumnami/3 wierszami z obrazem 1-pikselowym, który można rozwinąć w celu symulacji linii, w jaki sposób można odtworzyć ten układ za pomocą HTML i CSS bez tabeli lub obrazu dla "dzielników"?

Najbardziej podoba mi się to, że linie się nie przecinają.

<!-- 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>

Answer 1

można spróbować to lubią: 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; 
    } 
    } 
} 

to sprawia następujące 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> 

I użyłem Bootstrap do siatki.

Answer 2

Brak zależności dla mojego rozwiązania. Tworzę Flexbox .container, a następnie cztery elastyczne .item s. Domyślnym kierunkiem dla flexbox jest row, czego chcemy dla zewnętrznego układu, ale nie dla zawartości każdego elementu w rzędzie. Aby to zmienić, zmieniłam flex-direction dzieci (.item) na column, ponieważ w twoim przykładzie obrazy są ułożone pod kotwami.

Dla niezniszczalnej granicy między kotwicami a obrazami, wziąłem trochę skrótu i ​​przeniosłem style do pseudo klasy. Zwróć uwagę na position: relative; na .item. Zrobiono to, aby stworzyć bezpieczny pojemnik, w którym można ustawić granice pseudo klasy absolutnie ustawione.

.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>

Fiddle: https://jsfiddle.net/1sbx2h5e/