在Card上内联显示元素

苏拉杰·普拉萨德（Suraj Prasad）

与默认设置相比，我需要帮助来水平显示卡中的元素（一个显示在另一个下方）

目前，我的卡片如下图所示：

但是，我需要它来内联显示元素。

    <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>

凯文

如果允许CSS3，则可以使用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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。