简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Résoudre les difficultés de positionnement HTML
P粉476883986
P粉476883986 2024-04-02 19:09:26
0
1
297

Comment déplacer les sections À propos de moi et Éducation vers la droite du Web

Voici le lien du pencode : https://codepen.io/Weng-Hong-the-selector/pen/GRGjVLy

Voici mon HTML et 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;
}

`

J'aimerais la section À propos de moi et la section Éducation à droite de la section Informations, une idée pour que cela fonctionne ? Merci d'avance

P粉476883986
P粉476883986

répondre à tous(1)
P粉466643318
P粉4666433182024-04-03 10:04:34 1 plancher

Je ne sais pas si vous avez encore compris cela, mais un rapide coup d'œil à votre code m'indique que vous rencontrez des problèmes d'organisation HTML, donc resume_right est à l'intérieur resume_right>resume_left

Ceci est votre code fixe, j'espère que cela vous aidera.

Si vous rencontrez des problèmes de positionnement après cela, je vous recommande de lire la documentation 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
    
            
    
          
    •
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！