@qpz

Как игнорировать добавление тега p?

Есть такой дивжок «Эгея», при добавлении в текст поста 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.: код не мой, поэтому не пишите, пожалуйста, мнения по его оформлению.
  • Вопрос задан
  • 110 просмотров
Пригласить эксперта
Ответы на вопрос 1
Aetae
@Aetae
Тлен
Можно попробовать такое извращение, чтобы заигнорить "бесклассовые" параграфы:
p:not([class]) {
    display: contents;
}

только работать в IE оно не будет в любом случае.

Правильное решение - пропатчить движок, тем или иным способом, всё остальное - хрень.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы