如何正确编写头像图像的 HTML 和 CSS，其右侧有文本？

Question

我不确定如何为简历联系表的底部获取正确的 HTML 和 CSS。 当我尝试使用 HTML 和 CSS 时，文本不会出现在图像的右侧。 所有文本都位于徽标框下方。 如果可能的话，我仍在学习 HTML 和 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; }

 <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>

Answer 1

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

您可以查看下面的示例，它可能对您有所帮助。

 .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>

Answer 2

CSS Grid 允许您以比其他 CSS 布局解决方案更有效的方式管理布局。 它正确地基于这样一个事实，即您的 HTML 应该与您所看到的保持逻辑一致，然后您不必创建多个仅用于布局构建的元素。 你可以在那里写下关于它的一切。

• grid-template-columns属性定义每列的宽度

• grid-column-gap属性定义列之间的间隙

 .container { display: grid; grid-template-columns: 150px auto; grid-column-gap: 20px; } img { width: 100%; }

 <div class="container"> <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="" /> <div class="content"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed risus ligula, semper nec pretium nec. </p> </div> </div>

Answer 3

有很多选择。 一种是使用display: flex作为父域，并在两个子域中使用：一个用于文本，另一个用于图像。 您也可以为此使用表格单元格。 它也可以用浮动来完成，但我更喜欢单元格或弹性逻辑，因为你可以垂直居中内容。

Answer 4

 .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; margin-right:10px; } .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: 50px; 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_item { display:flex; align-items:center; }

 <div class="resume">My Resume</div> <div class="text">Lorem ipsum . . . </div> <div class="flex_item"> <div class="logo-box"> <div class="logo"></div> </div> <div class="flex-details"> <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>