html - 如何正确地为头像图像上的文本编写HTML和CSS？(How to correctly write the HTML and CSS for an avatar image with text to the right of it?)

Question

I am unsure how to get the correct HTML and CSS for the bottom part of the resume contact form.

(我不确定如何获取简历联系表底部的正确HTML和CSS。)

When I tried my HTML and CSS, the text would not go to the right of the image.

(当我尝试使用HTML和CSS时，文本不会位于图像的右侧。)

All of the text just goes under the logo box.

(所有文本都位于徽标框下方。)

I am still learning HTML and CSS would like an explanation if possible.

(我仍在学习HTML和CSS，如果可能的话，想要一个解释。)

Here is my HTML so far:

(到目前为止，这是我的HTML：)

<div class="resume">My Resume</div>
<div class="text">Lorem ipsum . . . </div>
<div class="logo-box">
     <div class="logo"></div>
</div>
<div class="job">Director of Web Development</div>
<div class="company">ABCD Company</div>
<div class="year">1999 - 2010</div>
<div class="show-more">SHOW MORE</div>

Here is my CSS so far:

(到目前为止，这是我的CSS：)

.resume {
    width: 584px;
    height: 65px;
    font-family: Bitter;
    font-size: 48px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.text {
    width: 699px;
    height: 262px;
    font-family: Lato;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: normal;
    color: #575159;
}

.logo-box {
    justify-content: center;
}

.logo {
    width: 146px;
    height: 146px;
    border-radius: 80px;
    border: solid 1px #979797;
}

.job {
    width: 561px;
    height: 41px;
    font-family: Bitter;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.company {
    width: 560px;
    height: 53px;
    font-family: Lato;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.year {
    width: 418px;
    height: 22px;
    font-family: Lato;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #575159;
}

.show-more {
    width: 181px;
    height: 19px;
    font-family: Lato;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #92719e;
}

  ask by waldo233 translate from so

Answer 1

You can use flex property via wrapping your logo div and rest of the content

(您可以通过包装logo div和其余content来使用flex属性)

You can see below example it may helps you.

(您可以看到以下示例，它可能会对您有所帮助。)

 .resume { width: 584px; height: 65px; font-family: Bitter; font-size: 48px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .text { width: 699px; height: 262px; font-family: Lato; font-size: 24px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 2; letter-spacing: normal; color: #575159; } .logo-box { justify-content: center; } .logo { width: 146px; height: 146px; border-radius: 80px; border: solid 1px #979797; } .job { width: 561px; height: 41px; font-family: Bitter; font-size: 30px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .company { width: 560px; height: 53px; font-family: Lato; font-size: 20px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .year { width: 418px; height: 22px; font-family: Lato; font-size: 18px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #575159; } .show-more { width: 181px; height: 19px; font-family: Lato; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; color: #92719e; } .flex-wrap { display: flex; } .flex-wrap .content { margin-left: 20px; } 

 <div class="resume">My Resume</div> <div class="text">Lorem ipsum . . . </div> <div class="flex-wrap"> <div class="logo-box"> <div class="logo"></div> </div> <div class="content"> <div class="job">Director of Web Development</div> <div class="company">ABCD Company</div> <div class="year">1999 - 2010</div> <div class="show-more">SHOW MORE</div> </div> </div>