图像定位问题

Question

嘿，我在将图像定位到右侧时遇到了麻烦，但它以某种方式固定在文本上。文字应该在左边，图片在右边。像这样。.

我已经尝试用浮动修复 ist 并使用不同的宽度和高度，但图像并不比文本更正确。

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wladimirs website</title>
    <link rel="stylesheet" href="general_settings.css">
    <link rel="stylesheet" href="header.css">
</head>
<body>
    <header>
        <div class="header_text">
        <nav>
            <ul>
                <li><a href="">Über Mich</a></li>
                <li><a href="">Dienste</a></li>
                <li><a href="">Mehr Informationen</a></li>
            </ul>
        </nav>
        <h1>Wladimir Godovanyuk, <br> <span style="color: #297AE3">Webdeveloper</span></h1>
        <p class="subheading">Hallo ich bin Wladimir Godovanyuk.Ich bin 15 Jahre alt und besuche gerade die Schule PTS Dornbirn.Ich hab viele hobbys, von Bücher lesen bis zu Boxen. Ich würde mich selber als disziplinert und zielstrebig bezeichnen.</p>
        
        <div class="circle">
            <img src="images/pexels-italo-melo-2379005.jpg" alt=""> 
        </div>
    </header>
    <section></section>
    <section></section>
    <footer></footer>
</body>
</html>

header.css

:root{
    --main-brand-color:#297AE3;
    --primary-color:#15171c;
    --secondary-color:#232933;
    --light-secondary-color:#2e3744;
    --text-color:white;
    --secondary-text-color: #b3b4b6;
}
header{
    padding: 100px 25px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.header_text{
    width: 850px;
}
.circle{
    height: 600px;
    width: 600px;
    overflow: hidden;
    border-radius: 50%;
    border: 20px solid var(--main-brand-color);

    display: flex;
    justify-content: center;
    align-items: center;
}

general_settings.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root{

    --main-brand-color:#297AE3;
    --primary-color:#15171c;
    --secondary-color:#232933;
    --light-secondary-color:#2e3744;
    --text-color:white;
    --secondary-text-color: #b3b4b6;
}
*{
    margin: 0;
    padding: 0;
}
body{
    min-height: 100vh;
    background-color: var(--primary-color);
    font-family: 'Poppins', 'Sans-serif';
    font-size: 20px;
    color: var(--text-color);
}
h1{
    font-size: 100px;
    line-height: 115%;
}
.circle{
    size: 100px, 100px;
}
.subheading{
    margin-top: 25px;
    color: var(--secondary-text-color);
}

Answer 1

作为选项

.header_text {
  /* width: 850px; */
}

.circle {
  /* height: 600px; */
  width: 600px;
  overflow: hidden;
  border-radius: 50%;
  border: 20px solid var(--main-brand-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

<header>
  <div class="header_text" style="display: flex">
    <div>
      <nav>
        <ul>
          <li><a href="">Über Mich</a></li>
          <li><a href="">Dienste</a></li>
          <li><a href="">Mehr Informationen</a></li>
        </ul>
      </nav>
      <h1>Wladimir Godovanyuk, <br> <span style="color: #297AE3">Webdeveloper</span></h1>
      <p class="subheading">Hallo ich bin Wladimir Godovanyuk.Ich bin 15 Jahre alt und besuche gerade die Schule PTS Dornbirn.Ich hab viele hobbys, von Bücher lesen bis zu Boxen. Ich würde mich selber als disziplinert und zielstrebig bezeichnen.</p>
    </div>
    <div class="circle">
      <img src="images/pexels-italo-melo-2379005.jpg" alt="">
    </div>
</header>

图像定位问题

问题描述投票：0回答：1

1个回答

最新问题

图像定位问题

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1