recherche

Maison  >  Questions et réponses  >  le corps du texte

Résoudre les difficultés de positionnement HTML

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粉476883986P粉476883986231 Il y a quelques jours359

répondre à tous(1)je répondrai

  • P粉466643318

    P粉4666433182024-04-03 10:04:34

    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

    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

    répondre
    0
  • Annulerrépondre