html - 文章底部的文字

标签 html css

<分区>

我想在图片旁边添加一些文字,但是当我在图片后面放置文字时,它会下降并且不会停留在文章的顶部。

* {
            margin: 0;
            box-sizing: border-box;
        }

        * a:link {
            text-decoration: none;
        }

        body {
            background-color: #f5f5f5;
            height: 100%;
            min-height: 100%;
        }
        article{
            background-color: #ffffff;
            width: 85%;
            padding: 10px 15px;
            text-align: right;
            direction: rtl;
            border-radius: 3px;
            margin: 20px auto;
            -webkit-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            -moz-box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
            box-shadow: 0px 0px 4px -1px rgba(0,0,0,0.75);
        }
        img{
            border: 1px solid #d9d9d9;
            display: inline-block;
        }
        .name{
            display: inline-block;
        }
<body>
<article>
<img src="https://sn56.scholastic.com/content/dam/classroom-magazines/sn56/issues/2018-19/040819/picture-this-nature-s-night-light/SN56_040819_Aurora-Hero-Mobile.jpg" width="375" height="375">
        <div class="name">text</div>
</article>
</body

我也尝试过使用内联显示,但没有用。

最佳答案

添加 CSS 并在顶部使用垂直对齐属性可能对您有帮助

关于html - 文章底部的文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56125856/

上一篇:Javascript : How to display a default tab content but hide other tab content

下一篇:html - 为什么 viewbox 属性会影响 SVG 元素的大小?

相关文章:

javascript 淡入/淡出仅适用于 div 但不适用于其子元素

php - header 或 session 问题

javascript - 代码库中的浏览器功能检测——我在使用……吗?

html - 如何使用相同的背景图像对齐 2 个堆叠元素,使其看起来像一个图像?

HTML 强制 img 尺寸需要 block ?

html - UIWebView 框架高度基于内容高度

javascript - 使用 jquery 将 ID 附加到 div 上

jquery - 基于鼠标位置的CSS背景图片位置

javascript - 在不修改当前 HTML、CSS 和图像名称的情况下,是否有针对 IE 6 的 PNG 修复?

javascript - 页面上的 Owl Carousel 和 Bootstrap 选项卡