如何将一些文本与在<figure>标签下定义的图片平行放置

Question

我有一个<figure>标记，现在我不得不在图像上（与图像平行）放置一些文本，我尝试过但无法实现。

HTML： <figure class=frame id="box"> <span class="helper"></span><img class= "profile1" src="" alt="my img"/> <figcaption id="text">Your Name</figcaption> </figure>

我希望放置一个包含一些文本的<p>标签，并将其显示在图片的右侧（平行）

必要的CSS：

.helper {
    display: inline-block;
    height: 95%;

}
.frame {
    height: 100px;      
    width: 100px;
    white-space: nowrap;
    text-align: center; 
    margin: 1em 0;
    padding: 20px;
    float: left;

}

.profile1 {
    background: #3A6F9A;
    float: left;
    vertical-align: left;
    max-height: 150px;
    max-width: 150px;
    justify-content: space-around;
     text-align: justify;
    width: [width of img];
}

#box {
    width: 1460px;
    justify-content: space-around;
    height: 150px; 
    box-sizing: 15px;
    border: 1px solid;

}

#text{

    text-align: left;
    margin: -1em 1.65em;
}

Answer 1

您可以添加p文本并将其向左浮动

p{margin:0;
float:left;
}

.helper {
    display: inline-block;
    height: 95%;

}
.frame {
    height: 100px;      
    width: 100px;
    white-space: nowrap;
    text-align: center; 
    margin: 1em 0;
    padding: 20px;
    float: left;

}

.profile1 {
    background: #3A6F9A;
    float: left;
    vertical-align: left;
    max-height: 150px;
    max-width: 150px;
    justify-content: space-around;
     text-align: justify;
    width: [width of img];
}

#box {
    width: 1460px;
    justify-content: space-around;
    height: 150px; 
    box-sizing: 15px;
    border: 1px solid;

}

#text{

    text-align: left;
    margin: -1em 1.65em;
}

<figure class=frame id="box">
        <span class="helper"></span><img class= "profile1" src="" alt="my img"/><p>Text Here</p>
        <figcaption id="text">Your Name</figcaption>
        </figure>