问题：

如何在css中同时设置图像和信息

艾泉

2023-03-14

我陷入了一个问题，当试图设置图像和文本并排，然后它不显示完美，结账下面我分享了我的代码。

这是我的形象

https://ibb.co/sks3bjm

我想要这样

https://ibb.co/rhfkbkx

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

共有1个答案

史商震

2023-03-14

看起来中间的柱子被压扁得太厉害了。这是因为每个图像-文本对都在具有class=“col-sm-4”的div中。这使得div太窄了。如果删除类，问题就会消失。

这是结果代码：

html prettyprint-override"><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>

类似资料：

Java如何在图像中设置DPI信息？

问题内容：我有一个想要导出高分辨率（或更确切地说是高像素密度？）图像以进行打印的应用程序-例如，我希望以每英寸250点（DPI）的速度打印图像，而不是默认值，据我了解是72 DPI。我正在使用带有Graphics2D对象的BufferedImage绘制图像，然后使用ImageIO.write（）保存图像。知道如何设置DPI吗？问题答案： Kurt的答案说明了这一点，但我仍然花了一些时间才能
如何在Flutter中设置背景图像？

我正试图为主页设置一个背景图像。我是从屏幕开始获得图像位置，填充宽度，但不是高度。我的代码中是否遗漏了什么？颤振有图像标准吗？图像缩放是否基于每个手机的屏幕分辨率？
如何在非wordpress中设置特色图像

在fb状态下粘贴wordpress url会带来一个特色图片和一些文本而当我将我的（核心php站点）url置于fb状态时，它只显示文本，但没有选择任何图像，而我在该页面上有10多个图像我搜索了很多，但几乎所有的帖子都与wordpress相关，而我不知道如何在php/html（非wordpress）上为页面制作图像特色图像。是否有一些html标记、属性或其他方法？
如何在iOS中同时使用前置和后置摄像头？

本文向大家介绍如何在iOS中同时使用前置和后置摄像头？，包括了如何在iOS中同时使用前置和后置摄像头？的使用技巧和注意事项，需要的朋友参考一下截至目前，您无法同时访问前置和后置摄像头。由于两个摄像头的会话都不相同，因此一个摄像头将立即开始，其他会话将消失。根据由苹果支持团队回答的苹果开发者论坛- “应用程序无法同时从前置和后置摄像头捕获。您可以从一个切换到另一个（之间有短暂的延迟），但不能同时
如何在CSS/html中旋转图像

在我的网站上，我有一个画廊，里面有我和我女朋友的一些照片，但是有两张照片是颠倒显示的。我不知道为什么。所有其他照片都是完美的。每张照片都是由同一个iPhone7拍摄的，但是前两张照片在网站上是颠倒的。在我的电脑上，它们显示得非常完美。以下是网站：www.selinundleon。com/图库。有人能帮我解决这个问题吗？非常感谢你。
如何在CSS中设置动画定时？[关闭]

有没有设置自定义动画定时的功能或战术？我正在尝试创建一个自定义定时警察flash动画，但我有一些问题。例如，我有两种颜色。红色和蓝色。我想让蓝色闪烁1秒，停止闪烁，红色开始闪烁，当红色停止闪烁，蓝色开始闪烁。

如何在css中同时设置图像和信息

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档