[html]<style>
/*переменные для стиля*/
#game {
--c: 200px; /*Высота блока, высота картинки*/
--b: #dbc3db; /*цвет текста, цвет рамки*/
--g: 500px; /*ширина картинки, ширина рамки, ширина таблицы*/
--f: "helvetica"; /*опционально - шрифт блока*/}
/*стили блока с картинкой*/
.e1 {
padding: 7px;
border: 1px solid var(--b);
height: calc(var(--c));
width: calc(var(--g));
}
/*стиль самой картинки*/
.e1 img {
width: calc(var(--g));
height: calc(var(--c));
}
/*стиль названия эпизода*/
.e2 {
width: 70px;
border-right: 1px solid var(--b)!important;
color: var(--b);
vertical-align: top;
padding-right: 10px!important;
text-align: right; font-size: 30px;
font-family: impact;
text-shadow: 2px 2px 2px #fff;
}
/*стиль описания эпизода*/
.e3 {
padding: 10px;
text-align: justify;
padding-right: 0px;
vertical-align: top;
}
/*по желанию - стиль буквицы*/
// .e3::first-letter {
float: left;
line-height: 35px;
font-size: 3em;
color: var(--b);
border: solid var(--b);
padding-top: 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
margin-bottom: -5px;
}
/*стиль блока участники*/
.e4 {
padding: 7px;
border: 1px solid var(--b);
width: calc(var(--g));
height: 22px;
font-size: 1.1em;
font-family: var(--f);
}
</style>
<div id="game">
<div align="center">
<div class="e1"><img src="https://dummyimage.com/500x200/dbc3db/fff.jpg"></div>
<table style="width:calc(var(--g));" border="0">
<tbody>
<tr>
<td class="e2">Название эпизода</td>
<td class="e3">
Описание эпизода:
<br>
— Вэй Усянь мёртв! Вот так прекрасные новости!<br>
<br>
Не прошло и дня с осады горы Луаньцзан, как добрые вести разлетелись среди заклинателей, будто на крыльях, ничуть не уступая в скорости когда-то разгоревшемуся пожару войны. И в самых именитых кланах, и среди простых бродячих заклинателей — всюду оживленно обсуждали осаду, которую возглавили Четыре Великих Ордена, собрав под свои знамёна сотни союзников.
</td>
</tr>
</tbody>
</table>
<div class="e4">
Участники эпизода
</div>
</div></div>[/html]
<style> /*переменные для стиля*/ #game { --c: 200px; /*Высота блока, высота картинки*/ --b: #dbc3db; /*цвет текста, цвет рамки*/ --g: 500px; /*ширина картинки, ширина рамки, ширина таблицы*/ --f: "helvetica"; /*опционально - шрифт блока*/} /*стили блока с картинкой*/ .e1 { padding: 7px; border: 1px solid var(--b); height: calc(var(--c)); width: calc(var(--g)); } /*стиль самой картинки*/ .e1 img { width: calc(var(--g)); height: calc(var(--c)); } /*стиль названия эпизода*/ .e2 { width: 70px; border-right: 1px solid var(--b)!important; color: var(--b); vertical-align: top; padding-right: 10px!important; text-align: right; font-size: 30px; font-family: impact; text-shadow: 2px 2px 2px #fff; } /*стиль описания эпизода*/ .e3 { padding: 10px; text-align: justify; padding-right: 0px; vertical-align: top; } /*по желанию - стиль буквицы*/ // .e3::first-letter { float: left; line-height: 35px; font-size: 3em; color: var(--b); border: solid var(--b); padding-top: 5px; padding-bottom: 5px; padding-right: 5px; padding-left: 5px; margin-right: 5px; margin-bottom: -5px; } /*стиль блока участники*/ .e4 { padding: 7px; border: 1px solid var(--b); width: calc(var(--g)); height: 22px; font-size: 1.1em; font-family: var(--f); } </style> <div id="game"> <div align="center"> <div class="e1"><img src="https://dummyimage.com/500x200/dbc3db/fff.jpg"></div> <table style="width:calc(var(--g));" border="0"> <tbody> <tr> <td class="e2">Название эпизода</td> <td class="e3"> Описание эпизода: <br> — Вэй Усянь мёртв! Вот так прекрасные новости!<br> <br> Не прошло и дня с осады горы Луаньцзан, как добрые вести разлетелись среди заклинателей, будто на крыльях, ничуть не уступая в скорости когда-то разгоревшемуся пожару войны. И в самых именитых кланах, и среди простых бродячих заклинателей — всюду оживленно обсуждали осаду, которую возглавили Четыре Великих Ордена, собрав под свои знамёна сотни союзников. </td> </tr> </tbody> </table> <div class="e4"> Участники эпизода </div> </div></div>