html - 将第一个文本对齐到图像右侧，然后将第二个文本对齐到图像下方

Question

我正在 http://invisionbilling.com/about/ 上的“关于”页面上工作.我试图将名称直接放在图片下方，将描述放在图片右侧。我不确定此页面上会有多少信息，但我想确保描述会环绕图像和名称，如果它越过图片。有人知道怎么做吗？下面是我的 HTML 和 CSS。谢谢!

HTML

<div class="about_image">
<span class="about_text">
<img class="about_image1" src="http://invisionbilling.com/wp- 
content/uploads/2018/07/Profile-Pic.jpg" />
***All the wording I won't place in here.
</span>
<div class="picture_name">
<span class="picture_text">Jane Doe</span>
</div>
</div>

CSS

.about_image1 {
    float: left;
    margin-right: 25px;
    margin-top: -30px;
    width: 300px;
    height: 300px;
    border-radius: 15px;
}

.about_image {
    display: flex;
    align-items: center;
}

.picture_text {
    font-size: 12px;
}

.picture_name {
    clear: left;
    align-items: below;
}

Answer 1

.about_image1 {
    float: left;
    margin-right: 25px;
    margin-top: -30px;
    width: 300px;
    height: 300px;
    border-radius: 15px;
}

.about_image {
    display: flex;
    align-items: center;
}

.picture_text {
    font-size: 12px;
}

.picture_name {
   position: absolute;
    bottom: 0px;
}

<div class="about_image">
<span class="about_text">
<img class="about_image1" src="http://invisionbilling.com/wp- 
content/uploads/2018/07/Profile-Pic.jpg" />
***All the wording I won't place in here.
</span>
<div class="picture_name">
<span class="picture_text">Jane Doe</span>
</div>
</div>