элементы inline-block просто вытекают вместо перехода на следующую строку - PullRequest
Новая
       16

элементы inline-block просто вытекают вместо перехода на следующую строку

0 голосов
/ 04 июня 2019

При использовании DOM PDF элементы просто выходят из родительского элемента вместо перехода к следующей строке после рендеринга, что-то вроде этого: 

* {
  font-size: x-small;
  font-family: Arial, Helvetica, sans-serif;
}

.child {
  background-color: orange;
  display: inline-block;
  width: 25%;
  vertical-align: top;
}
	<div style="background-color:pink;">
		<div style="background-color:red;float:left;width:50%;">PARENT</div>
		<div style="background-color:green;float:left;width:50%;">
			<div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div><!--
			--><div class="child">CHILD</div>
		</div>
	</div>

Рендеринг вывода из DOM PDF: rendered output

Я ожидал чего-то подобного (вывод из браузера) :

browser output

Уже пытался использовать float:left вместо display:inline-block, но элементы просто перекрывались друг с другом, поэтому я выбрал последнее.

Какими еще способами можно добиться того же результата, что и в браузере?

...