时间戳

首页 > 解决方案 > 文章底部的文字

html - 文章底部的文字

问题描述

我试图在图像旁边放一些文字，但是当我在图像之后放置文字时，它会下降并且不会停留在文章的顶部。

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

我也尝试过将显示器用作内联，但它不起作用。

标签： htmlcss

解决方案

你可以设置

article{
        display: flex;
}


* {
            margin: 0;
            font-family: Iransans;
            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;
        }
        
        article{
        display: flex;
        }
<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

推荐阅读