Есть такой дивжок «Эгея», при добавлении в текст поста HTML-кода, он добавляет туда строчным и не только элементам тег p. Из-за этого ломается адаптивная вёрстка. В текстах ниже 2 примера, один с тем как должна выглядеть верстка, а второй результат преобразования эгеей. Мне нужно чтобы текст был справа от картинке в мобильной версии. Как так можно сделать? Вся проблема в этом куске, где p оборачивает a и img.
<div class="anons-box">
<p>
<a href="https://alexandertokarev.ru/all/o-vyraschivanii-1/"><br />
<img src="https://alexandertokarev.ru/files/growing-poster-01.jpg" class="img-anons">
</p>
Изначальный, нужный вариант
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="growing.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<aside id="rm3">
<div class="top-line">
<p class="about">О выращивании</p>
</div>
<!-- 1 row -->
<div class="wrapper-3cols">
<div class="anons-box">
<a href="https://alexandertokarev.ru/all/o-vyraschivanii-1/">
<img src="https://alexandertokarev.ru/files/growing-poster-01.jpg" class="img-anons"><!--
--><div class="txt-box">
<p class="anons-title">#1: Приветствие </p>
<p class="anons-lead">Кто я такой, почему этим занимаюсь и о чём планирую здесь рассказать</p>
</div>
</a>
</div>
</div>
<div class="bottom-line"></div>
</aside>
</body>
</html>
Вариант после «Эгеи» (ахтунг, очень кривое форматирование)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="growing.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
<aside id="rm3">
</p>
<div class="top-line">
<p class="about">О выращивании</p>
</div>
<!-- 1 row -->
<div class="wrapper-3cols">
<div class="anons-box">
<p>
<a href="https://alexandertokarev.ru/all/o-vyraschivanii-1/"><br />
<img src="https://alexandertokarev.ru/files/growing-poster-01.jpg" class="img-anons">
</p><!--
--><div class="txt-box">
<p class="anons-title">#1: Приветствие </p>
<p class="anons-lead">Кто я такой, почему этим занимаюсь и о чём планирую здесь рассказать</p>
</div></a>
</div>
</div>
</div>
<div class="bottom-line"></div>
<p>
</aside>
</p>
</body>
</html>
CSS
/* 3 COLS PROMO */
#rm3 a {
border: none;
}
#rm3 a:hover {
opacity: .90;
}
#rm3 .about {
font-size: 14px;
line-height: 18px;
text-align: center;
text-transform: uppercase;
letter-spacing: .15em;
color: #939393;
background-color: #fff;
position: relative;
top: -12px;
display: inline-block;
padding: 0px 20px;
}
#rm3 .top-line {
overflow: visible;
vertical-align: bottom;
text-align: center;
margin-top: 30px;
max-width: 734px;
height: 30px;
border-top: 1px solid #e1e1e1;
}
#rm3 .bottom-line {
height: 1px;
max-width: 734px;
border-top: 1px solid #e1e1e1;
}
#rm3 .wrapper-3cols {
vertical-align: top;
background-color: #fff;
columns: 3;
column-gap: 30px;
column-rule: none;
max-width: 734px;
*border-bottom: 1px solid #e2e2e2;
padding-bottom: 25px;
}
@media screen and (max-width:700px) {
#rm3 .wrapper-3cols {
columns: 1;
min-width: auto;
padding-bottom: 0px;
}
}
#rm3 .anons-box {
vertical-align: top;
*border: 1px dotted red;
height: 260px;
}
@media screen and (max-width:700px) {
#rm3 .anons-box {
height: auto;
}
}
#rm3 .img-anons {
width: 220px;
height: 165px;
border-radius: 4px;
margin-right: 15px;
vertical-align: top;
margin-bottom: 10px;
}
@media screen and (max-width:700px) {
#rm3 .img-anons {
width: 100px;
height: 75px;
margin-bottom: 20px;
}
}
#rm3 .txt-box {
display: block;
vertical-align: top;
*border: 1px dashed blue;
width: calc(100% / 180px);
}
@media screen and (max-width:700px) {
#rm3 .txt-box {
display: inline-block;
width: calc(100% - 115px);
padding-bottom: 5px;
}
}
#rm3 .anons-title {
font-weight: bold;
font-size: 16px;
line-height: 19px;
text-decoration-line: underline;
text-decoration-color: #e2e2e2;
}
#rm3 .anons-lead {
font-weight: normal;
font-size: 14px;
line-height: 16px;
color: #939393;
}
P.S.: код не мой, поэтому не пишите, пожалуйста, мнения по его оформлению.
Простой
