Отображать элементы на карте

Question

Мне нужна помощь для отображения элементов по горизонтали на карточке по сравнению со значениями по умолчанию (один под другим)

В настоящее время моя карточка выглядит так, как показано на изображении ниже:

Однако мне нужно, чтобы отображать элементы встроенными.

    <div class="ibm-col-12-2 card1" >
                                    <div class="ibm-card">
                                        <div class="ibm-card__image">
                                            <img src="https://cdn.kalingatv.com/wp-content/uploads/2019/12/ibm.png" alt="card_3" width="300" height="170" class="ibm-resize"></div>
                                        <div class="ibm-card__content">
                                            <h4 class="ibm-h4">Gain transactional insights</h4>
                                            <p>Use AI to rapidly find and visualize complete supply chain transactions</p>
                                            <p class="ibm-ind-link">
                                                <a href="javascript:;" class="ibm-forward-link ibm-light">Explore</a></p>
                                        </div>
                                    </div>
                                </div>

Answer 1

Если вы разрешите CSS3, вы можете go с использованием макета flexbox. Стиль .ibm-card с display: flex;, и текст будет автоматически помещен справа от изображения.

В Интернете доступно много информации о макете flexbox, вы можете, например, проверить эта страница .

    <div class="ibm-col-12-2 card1" >
                                    <div class="ibm-card" style="display: flex;">
                                        <div class="ibm-card__image">
                                            <img src="https://cdn.kalingatv.com/wp-content/uploads/2019/12/ibm.png" alt="card_3" width="300" height="170" class="ibm-resize"></div>
                                        <div class="ibm-card__content">
                                            <h4 class="ibm-h4">Gain transactional insights</h4>
                                            <p>Use AI to rapidly find and visualize complete supply chain transactions</p>
                                            <p class="ibm-ind-link">
                                                <a href="javascript:;" class="ibm-forward-link ibm-light">Explore</a></p>
                                        </div>
                                    </div>
                                </div>