简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Lösung von HTML-Positionierungsschwierigkeiten
P粉476883986
P粉476883986 2024-04-02 19:09:26
0
1
298

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> &nbsp&nbspResults: 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

P粉476883986
P粉476883986

Antworte allen(1)
P粉466643318
P粉4666433182024-04-03 10:04:34 1 Etage

不确定您是否已经弄清楚了这一点，但是快速浏览一下您的代码，我发现您遇到了 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
              
    
            
    • 
            
  • 
              
    
                
              
    
              
    
                [email protected]
              
    
            
    • 
          

        

        

          

            
Social

          

          
        

       
      

    

     

          

            

              
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
    
            
    
          
    •
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！