解决HTML定位困难
P粉476883986
P粉476883986 2024-04-02 19:09:26
[CSS3讨论组]

如何将“关于我”和“教育”部分移至网络右侧

这里是pencode链接:https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy

这是我的 HTML 和 CSS `





  
profile_pic

TAN WENG HONG

STUDENT OF DIPLOMA IN IT

  • Male
  • Malaysian
  • 13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
  • 012-352-5089
  • [email protected]

About me

My name is Tan Weng Hong and I am currently 19 years old

Education

  • 2021 - present

    Taylor's College

    Diploma in Information Technology

    Current CGPA: 3.01

    Will Graduate August 2023

  • 2016 - 2020

    SMK Sri KDU

    - Sijil Pelajaran Malaysia (SPM)

      Results: 1A+ 1A 1C+ 1C 2D 3E 1G

`

`

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: 'Roboto Condensed', sans-serif;
}

body {
  background: #D3D3D3;
  font-size: 14px;
  line-height: 22px;
  color: #555555;
  width: 200vh;
  text-align: center;
}

img{
  border: solid;
  border_width: 5px;
}

.bold {
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
}

.semi-bold {
  font-weight: 500;
  font-size: 16px;
}

.regular{
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}
.resume {
  width: 1200px;
  height: auto;
  display: flex;
  margin: 50px auto;
}

.resume .resume_left {
  width: 290px;
  height: 1050px;
  background: #0bb5f4;
  padding: 3px;
}

.resume .resume_left .resume_profile {
  width: 100%;
  height: 350px;
}

.resume .resume_left .resume_profile img {
  width: 100%;
  height: 100%;
}

.resume .resume_left .resume_content {
  padding: 0 25px;
}

.resume .title {
  margin-bottom: 20px;
}

.resume .resume_left .bold {
  color: #fff;
}

.resume .resume_left .regular {
  color: #b1eaff;
}

.resume .resume_item {
  padding: 25px 0;
  border-bottom: 2px solid #b1eaff;
}

.resume .resume_left ul li {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}

.resume .resume_left ul li:last-child {
  margin-bottom: 0;
}

.resume .resume_left ul li .icon {
  width: 35px;
  height: 35px;
  background: #fff;
  color: #0bb5f4;
  border-radius: 50%;
  margin-right: 15px;
  font-size: 16px;
  position: relative;
}

.resume .icon i,
.resume ul li i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.resume .resume_left ul li .data {
  color: #b1eaff;
}

.resume .resume_left .resume_social .semi-bold {
  color: #fff;
  margin-bottom: 3px;
}

`

我希望“关于我”部分和教育部分位于信息部分的右侧,知道如何使其发挥作用吗?预先感谢您

P粉476883986
P粉476883986

全部回复(1)
P粉466643318

不确定您是否已经弄清楚了这一点,但是快速浏览一下您的代码,我发现您遇到了 html 组织问题,因此 resume_right 位于 resume_right 内>resume_left

这是您的固定代码,希望对您有所帮助。

如果在此之后您遇到任何定位问题,我建议您阅读 CSS flex 文档。

https://developer.mozilla.org/en -US/docs/Learn/CSS/CSS_layout/Flexbox

profile_pic

TAN WENG HONG

STUDENT OF DIPLOMA IN IT

  • Male
  • Malaysian
  • 13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor
  • 012-352-5089

About me

My name is Tan Weng Hong and I am currently 19 years old

Education

  • 2021 - present

    Taylor's College

    Diploma in Information Technology

    Current CGPA: 3.01

    Will Graduate August 2023

  • 2016 - 2020

    SMK Sri KDU

    - Sijil Pelajaran Malaysia (SPM)

    &nbsp&nbspResults: 1A+ 1A 1C+ 1C 2D 3E 1G

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号