Позиционирование при верстке кроссворда

Question

Не могу поставить слово "карты", чтобы получился верный кроссворд. Как можно это сделать?

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Кроссворд</title>
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <div class="crossword w-8">
            <div class="letter" data-number="1">Я</div>
            <div class="letter">Н</div>
            <div class="letter">Д</div>
            <div class="letter">Е</div>
            <div class="letter">К</div>
            <div class="letter" data-number="2">С</div>
            <div class="space w-2"></div>
            <div class="space w-5"></div>
            <div class="letter">У</div>
            <div class="space w-2"></div>
            <div class="space w-5"></div>
            <div class="letter">П</div>
            <div class="space w-2"></div>
            <div class="space w-5"></div>
            <div class="letter">Е</div>
            <div class="space w-2"></div>
            <div class="space w-3"></div>
            <div class="letter" data-number="3">К</div>
            <div class="letter">А</div>
            <div class="letter">Р</div>
            <div class="letter">Т</div>
            <div class="letter">Ы</div>

        </div>
    </body>
</html>

CSS:

:root {
    --color-black: #272727;
    --size: 40px;
}

body {
    color: var(--color-black);
    font: 16px/1em arialregular;
    margin: 0;
    padding: 0;
}

.crossword {
    background: var(--color-black);
    border: 1px solid var(--color-black);
    display: block;

}


.crossword.w-1, .space.w-1 {width: calc(var(--size) * 1);}
.crossword.w-2, .space.w-2 {width: calc(var(--size) * 2);}
.crossword.w-3, .space.w-3 {width: calc(var(--size) * 3); float: left}
.crossword.w-4, .space.w-4 {width: calc(var(--size) * 4);}
.crossword.w-5, .space.w-5 {width: calc(var(--size) * 5); float: left;}
.crossword.w-6, .space.w-6 {width: calc(var(--size) * 6);}
.crossword.w-7, .space.w-7 {width: calc(var(--size) * 7);}
.crossword.w-8, .space.w-8 {width: calc(var(--size) * 8);}

.letter {
    position: relative;
    background: white;
    border: 1px solid var(--color-black);
    float: left;
    display: block;
    box-sizing: border-box;
    width: var(--size);
    height: var(--size);
    line-height: var(--size);
    text-align: center;
}

.letter::after {
    content: attr(data-number);
    line-height: 1.3;
    font-size: 75%;
    position: absolute;
    left: calc(var(--size) / 12);
    top: 0;
}

.space {

    display: block;
    height: var(--size);
}

https://codepen.io/kava13/pen/XWXWEMe

БЛОГ НА HUSL

Позиционирование при верстке кроссворда

Ответы (0 шт):