恢复联系表格

我不确定如何获取简历联系表底部的正确HTML和CSS。 当我尝试使用HTML和CSS时,文本不会位于图像的右侧。 所有文本都位于徽标框下方。 我仍在学习HTML和CSS,如果可能的话,想要一个解释。

到目前为止,这是我的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> 

到目前为止,这是我的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; }  

===============>>#1 票数: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> 

  ask by waldo233 translate from so

===============>>#2 票数:1

与其他CSS布局解决方案相比,CSS Grid允许您以更有效的方式管理布局。 这是基于这样一个事实,即您的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> 

  ask by waldo233 translate from so

===============>>#3 票数:0

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

  ask by waldo233 translate from so

===============>>#4 票数:0

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

  ask by waldo233 translate from so

本文未有回复,本站智能推荐: