suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Lösung von HTML-Positionierungsschwierigkeiten

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 `

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

<!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>

`

`

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

* {

  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粉476883986P粉476883986336 Tage vor458

Antworte allen(1)Ich werde antworten

  • P粉466643318

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

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

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

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

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

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    54

    55

    56

    57

    58

    59

    60

    61

    62

    63

    64

    65

    66

    67

    68

    69

    70

    71

    72

    73

    74

    75

    76

    77

    78

    79

    80

    81

    82

    83

    84

    85

    86

    87

    88

    89

    90

    91

    92

    93

    94

    95

    96

    97

    98

    99

    100

    101

    102

    103

    104

    105

    106

    107

    108

    109

    110

    111

    112

    113

    114

    115

    116

    117

    118

    119

    120

    121

    122

    123

    124

    125

    126

    127

    128

    129

    <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">

                    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e293b303936313039702a3f301e2d3a702a3f2732312c2d703b3a2b703327">[email protected]</a>

                  </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>

        </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 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>

      </div>

    Antwort
    0
  • StornierenAntwort