如何将一些文本平行放置到在<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>