В настоящее время я разрабатываю страницу с отзывами для кого-то, но у меня проблема. Есть один отзыв, который намного длиннее остальных, и он меняет высоту строки, что влияет на отображение тех, что под ней.
Я хотел бы, чтобы все отзывы касались друг друга (человек, для которого я делаю это, сказал, чтобы попытаться сделать что-то вроде этого: https://www.phocassoftware.com/testimonials)
Любая помощь приветствуется, вот мой код,
<div class = "testimonial-blocks">
<div class = "1-testimonial tblock">
<p>"Example Short Testimonial 1"</p>
<p><strong> - Example person</strong></p>
</div>
<div class = "2-testimonial tblock">
<p>"Example Medium Testimonial 1 Example Medium Testimonial 1 Example Medium Testimonial 1 Example Medium Testimonial 1"</p>
<p><strong> - Example person</strong></p>
</div>
<div class = "3-testimonial tblock">
<p>"Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 Example Long Testimonial 1 "</p>
<p><strong> - Example person</strong></p>
</div>
<div class = "4-testimonial tblock">
<p>"Example Testimonial 1"</p>
<p><strong> - Example person</strong></p>
</div>
<div class = "5-testimonial tblock">
<p>"Example Testimonial 1"</p>
<p><strong> - Example person</strong></p>
</div>
<div class = "6-testimonial tblock">
<p>"Example Testimonial 1"</p>
<p><strong> - Example person</strong></p>
</div>
<div class = "7-testimonial tblock">
<p>"Example Testimonial 1"</p>
<p><strong> - Example person</strong></p>
</div>
</div>
Вот код в скрипте js https://jsfiddle.net/nd7pwbt9/2/ вот проблема в том, что они не касаются друг друга.
Я еще не все стилизовал должным образом, очевидно, я просто хочу, чтобы отзывы были сначала в нужном месте. Спасибо.
Это похоже на раскладку сетки pinterest. У вас есть пример для этого здесь: bootsnipp.com/snippets/featured/pinterest-like-responsive-gr идентификатор






Дерзкая идея ... Chrome-браузер ... проверьте элемент, на котором вы основываете свой дизайн, посмотрите на его CSS, посмотрите на нижнюю границу ... снимите отметку ... вуаля ... используйте тот же код CSS в своем дизайне , или хотя бы в качестве основы для вашего собственного дизайна