Способ воспроизвести этот эффект макета с помощью CSS?

html css html-table

533 просмотра

2 ответа

0 Репутация автора

Если не считать создание таблицы из 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>

Автор: user3810900 Источник Размещён: 18.07.2016 06:16

Ответы (2)


1 плюс

876 Репутация автора

Решение

Вы можете попробовать это как: 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 для сетки.

Автор: Sergej Размещён: 18.07.2016 07:06

10 плюса

11203 Репутация автора

Нет зависимостей для моего решения. Я создаю flexbox, .containerа затем четыре flex- .itemов. Направление по умолчанию для flexbox - rowэто то, что мы хотим для внешнего макета, но не для содержимого каждого элемента в строке. Чтобы изменить это, я изменил flex-directionдля children ( .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/

Автор: Andy Hoffman Размещён: 18.07.2016 07:19
Вопросы из категории :
32x32