Question

我正在尝试在图像旁边添加一些文本，但是当我在图像之后放置文本时，该文本会下降并且不会停留在文章顶部。

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

我也尝试将显示用作内联显示，但没有用。

Answer 1

您可以设置

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

Answer 2

添加CSS并使用vertical align属性使其对您有帮助

Answer 3

要将文本放在顶部的起始位置，请定义“ vertical-align：top;”。显示的属性：inline-block;

* {
            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;
            vertical-align: top;
        }
        .name{
            display: inline-block;
            vertical-align: top;
        }

<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

Answer 4

请您更改结构。喜欢：

<article>
<div class="name">text</div><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">
</article>

在下面添加CSS代码：

.name {
    display: inline-block;
    vertical-align: top;
    margin-left: 5px;
}

注意：如果您使用过display:inline-block;，则必须使用verticl-align:top;

文字位于文章的底部

4 个答案: