Как разместить текст во втором столбце вокруг элемента увеличенного размера в первом столбце с помощью CSS? ⇐ Html

[Anonymous]

Я пытаюсь составить кроссворд таким образом, чтобы его можно было просмотреть в Интернете и распечатать для фактического решения головоломки. Результат должен хорошо выглядеть на листе формата А4 или аналогичном, а также иметь место для записи ответов в сетку.

Код: Выделить всё

.block {
width: 300px;
height: 400px;
-webkit-columns: 0 0;
-webkit-column-gap: 10px;
column-width: 140px;
}
table.xw {
table-layout: fixed;
background-color: lightblue;
width: 200px;
height: 200px;
margin: 0 0 0 10px;
}
.clue {
margin: 0 0 3px 10px;
page-break-inside: avoid !important;
}





 Crossword grid here

ACROSS
1. First across clue
2. Second across clue
3. Third across clue
DOWN
1. First down clue
2. Second down clue
3. Third down clue

Идея состоит в том, чтобы разместить сетку в верхнем левом углу, а подсказки, начинающиеся под ним. Подсказки располагаются вниз в виде двух столбцов: вверх до правой части сетки, а затем вниз под сетку.
Пример можно найти на https://wombat.cf/crosswords. /special-2024.html, где я уменьшил сетку, чтобы она поместилась в столбец. Когда я распечатываю это, квадраты кажутся слишком маленькими для записи.
Поэтому мне хотелось бы, чтобы сетка была больше, а подсказки справа от нее отображались. в более узкий столбец, а затем используйте всю ширину столбца под сеткой.
Простое увеличение размера сетки дает https://wombat.cf/crosswords/broken-2024.html< /p>
У меня есть поигрался с другими параметрами, используя flex и тому подобное, но не могу понять, как расположить подсказки по сетке и в более широком столбце ниже.
Это все должен работать с webkit, так как я использую Python pdfkit.from_string() для создания PDF-файлов для печати, а также публикации HTML в Интернете.
https:/ /alistapart.com/article/crosscolumn/ имеет частичное решение, но я задавался вопросом, есть ли за 20 лет, прошедших с момента публикации, лучший способ.
Используя это решение, я прихожу к https://wombat.cf/crosswords/desired-2024.html
но для этого требуется вручную добавить вырез в нужное место, вот так:

Код: Выделить всё

.block {
width: 300px;
height: 400px;
-webkit-columns: 0 0;
-webkit-column-gap: 10px;
column-width: 140px;
}
table.xw {
table-layout: fixed;
background-color: lightblue;
width: 200px;
height: 200px;
margin: 0 0 0 10px;
}
.cutout {
width:200px;
height: 200px;
margin-left: -140px;
float: left;
}
.clue {
margin: 0 0 3px 10px;
page-break-inside: avoid !important;
}





 Crossword grid here

ACROSS
1. First across clue

2. Second across clue
3. Third across clue
DOWN
1. First down clue
2. Second down clue
3.  Third down clue

Подробнее здесь: https://stackoverflow.com/questions/793 ... -using-css