Как я могу заставить div'ы касаться друг друга по вертикали, когда они расположены в виде сетки?

В настоящее время я разрабатываю страницу с отзывами для кого-то, но у меня проблема. Есть один отзыв, который намного длиннее остальных, и он меняет высоту строки, что влияет на отображение тех, что под ней.

Я хотел бы, чтобы все отзывы касались друг друга (человек, для которого я делаю это, сказал, чтобы попытаться сделать что-то вроде этого: 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/ вот проблема в том, что они не касаются друг друга.

Я еще не все стилизовал должным образом, очевидно, я просто хочу, чтобы отзывы были сначала в нужном месте. Спасибо.

  • Итан

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

Dale 22.08.2018 12:00

Это похоже на раскладку сетки pinterest. У вас есть пример для этого здесь: bootsnipp.com/snippets/featured/pinterest-like-responsive-gr‌ идентификатор

Torjescu Sergiu 22.08.2018 12:03
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
2
26
0

Другие вопросы по теме