So verschieben Sie die Abschnitte ?über mich“ und ?Bildung“ auf die rechte Seite des Webs
Hier ist der Pencode-Link: https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy
Das ist mein HTML und CSS `
<!DOCTYPE html> <body> <div class="resume"> <div class="resume_left"> <div class="resume_profile"> <img src="me.png" width=500px height=250px alt="profile_pic"> </div> <div class="resume_content"> <div class="resume_item resume_info"> <div class="title"> <p class="bold">TAN WENG HONG</p> <p class="regular">STUDENT OF DIPLOMA IN IT</p> </div> <ul> <li> <div class="icon"> <i class="fas fa-mars-and-venus"></i> </div> <div class="data"> Male </div> </li> <li> <div class="icon"> <i class="fa-solid fa-flag"></i> </div> <div class="data"> Malaysian </div> </li> <li> <div class="icon"> <i class="fa-solid fa-signs-post"></i> </div> <div class="data"> 13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor </div> </li> <li> <div class="icon"> <i class="fas fa-mobile-alt"></i> </div> <div class="data"> 012-352-5089 </div> </li> <li> <div class="icon"> <i class="fas fa-envelope"></i> </div> <div class="data"> [email protected] </div> </li> </ul> </div> <div class="resume_item resume_social"> <div class="title"> <p class="bold">Social</p> </div> <ul> <li> <div class="icon"> <i class="fab fa-facebook-square"></i> </div> <div class="data"> <p><a href="https://www.facebook.com/tan.w.hong.16">Facebook</a></p> </div> </li> <li> <div class="icon"> <i class="fab fa-instagram-square"></i> </div> <div class="data"> <p><a href="https://www.instagram.com/wenghongggggg/">Instagram</a></p> </div> </li> <li> <div class="icon"> <i class="fab fa-youtube"></i> </div> <div class="data"> <p><a href="https://www.youtube.com/channel/UCXdPTNsToFxqfBvHg_z5XTA">Youtube</a></p> </div> </li> <li> <div class="icon"> <i class="fab fa-linkedin"></i> </div> <div class="data"> <p><a href="https://www.linkedin.com/in/tan-weng-hong-314211251/">LinkedIn</a></p> </div> </li> </ul> </div> <div class="resume_right"> <div class="resume_item resume_about"> <div class="title"> <p class="bold">About me</p> </div> <p>My name is Tan Weng Hong and I am currently 19 years old</p> </div> </div> </div> <div class="resume_item resume_education"> <div class="title"> <p class="bold">Education</p> </div> <ul> <li> <div class="date">2021 - present</div> <div class="info"> <p class="semi-bold">Taylor's College</p> <p>Diploma in Information Technology</p> <p>Current CGPA: 3.01</p> <p>Will Graduate August 2023</p> </div> </li> <li> <div class="date">2016 - 2020</div> <div class="info"> <p class="semi-bold">SMK Sri KDU</p> <p>- Sijil Pelajaran Malaysia (SPM)</p> <p>   Results: 1A+ 1A 1C+ 1C 2D 3E 1G</p> </div> </li> </ul> </div> <div class="resume_item resume_hobby"> </body> </html>
`
`
* { 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; }
`
Ich h?tte gerne den Abschnitt ?über mich“ und den Abschnitt ?Bildung“ rechts neben dem Abschnitt ?Informationen“. Haben Sie eine Idee, wie das funktioniert? Vielen Dank im Voraus
不確定您是否已經弄清楚了這一點,但是快速瀏覽一下您的代碼,我發(fā)現(xiàn)您遇到了 html 組織問題,因此 resume_right 位于 resume_right 內>resume_left
這是您的固定代碼,希望對您有所幫助。
如果在此之后您遇到任何定位問題,我建議您閱讀 CSS flex 文檔。
https://developer.mozilla.org/en -US/docs/Learn/CSS/CSS_layout/Flexbox
![]()
TAN WENG HONG
STUDENT OF DIPLOMA IN IT
Male Malaysian 13A, Elitis Suria, Valencia, 47000, Sungai Buloh, Selangor 012-352-5089About me
My name is Tan Weng Hong and I am currently 19 years old
Education
2021 - presentTaylor's College
Diploma in Information Technology
Current CGPA: 3.01
Will Graduate August 2023
2016 - 2020SMK Sri KDU
- Sijil Pelajaran Malaysia (SPM)
  Results: 1A+ 1A 1C+ 1C 2D 3E 1G