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>

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

1 个答案: