时间戳

首页 > 解决方案 > 如何在css中并排设置图像和信息

html - 如何在css中并排设置图像和信息

问题描述

我在尝试并排设置图像和文本时遇到问题，然后它没有显示完美，下面结帐我分享了我的代码。

这是我的形象

https://ibb.co/SKS3bJM

我想要这样

https://ibb.co/RhFkbkX

索引.html

<div class="container">
    <div class="row">
        <div class="col-md-4 mt-2">
            <img src="Images/twitter.jpg" style="width: 200px;">
            <div style="margin-top: 10px;">
                <h4>Should Twitter Get Rid of Follower Counts?</h4>
                <p>The possibility feels closer than ever</p>
                <p>Cool Neha in All Things Creative</p>
                <p><b>JAN 9. 5 min read</b></p>

            </div>
           
        </div>
        <div class="col-sm-4">
            <div class="row" style="display: flex; flex-direction: column;"  style="height: 50px;">
                <div class="col-sm-4" style="display: flex; ">
                    <img src="Images/html.jpg" style="width: 100px; height: 100px;">
                    <p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
                </div>
                <div class="col-sm-4" style="display: flex;">
                    <img src="Images/cs.png" style="width: 100px; height: 100px;">
                    <p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
                </div>
                <div class="col-sm-4" style="display: flex;">
                    <img src="Images/js.png" style="width: 100px; height: 100px;">
                    <p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4  mt-2">
            <img src="Images/cofee.png" style="width: 350px;">
            <div style="margin-top: 10px;">
                <h4>No,That's Not How You Say It.</h4>
                <p>A short Personal history of my favourite fast Food.</p>
                <p>VIP Singh</p>
                <p><b>JAN 29. 8 min read</b></p>
            </div>
           
        </div>
    </div>
</div>

标签： htmlcssbootstrap-4

解决方案

看起来中心柱被压得太厉害了。这是因为每个图像-文本对都在一个带有class="col-sm-4". 这使得 div 太窄了。如果你删除类，问题就会消失。

这是生成的代码：

<div class="container">
    <div class="row">
        <div class="col-md-4 mt-2">
            <img src="Images/twitter.jpg" style="width: 200px;">
            <div style="margin-top: 10px;">
                <h4>Should Twitter Get Rid of Follower Counts?</h4>
                <p>The possibility feels closer than ever</p>
                <p>Cool Neha in All Things Creative</p>
                <p><b>JAN 9. 5 min read</b></p>

            </div>
           
        </div>
        <div class="col-md-4">
            <div class="row" style="display: flex; flex-direction: column;"  style="height: 50px;">
                <div class="" style="display: flex; ">
                    <img src="Images/html.jpg" style="width: 100px; height: 100px;">
                    <p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
                </div>
                <div class="" style="display: flex;">
                    <img src="Images/cs.png" style="width: 100px; height: 100px;">
                    <p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
                </div>
                <div class="" style="display: flex;">
                    <img src="Images/js.png" style="width: 100px; height: 100px;">
                    <p>Html, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on WWW pages.</p>
                </div>
            </div>
        </div>
        <div class="col-sm-4  mt-2">
            <img src="Images/cofee.png" style="width: 350px;">
            <div style="margin-top: 10px;">
                <h4>No,That's Not How You Say It.</h4>
                <p>A short Personal history of my favourite fast Food.</p>
                <p>VIP Singh</p>
                <p><b>JAN 29. 8 min read</b></p>
            </div>
           
        </div>
    </div>
</div>

推荐阅读