图像在调整大小时向下移动 CSS

Question

我要做的就是将个人资料图片图像放在文本的一侧并让它保持在那里。 但是，当 window 为全尺寸时，图像会向下移动并移出块，如链接所示。 我尝试了很多不同的解决方案，但似乎都没有奏效，非常感谢您的帮助。 谢谢。

这是链接： https://codepen.io/Tantlu/full/JjyVrZZ

CSS 代码：

body, html, main {
  height: 100%;
  font-size: 10px;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}

.header {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: 'Lexend', sans-serif;
}

h1 {
  font-size: 6rem;
  text-transform: uppercase;
  letter-spacing: 3.5px;
}

h2 {
  font-size: 2rem;
  letter-spacing: 1rem;
}

h3 {
  text-transform: uppercase;
  font-size: 3rem;
  font-family: 'Lexend', sans-serif;
  text-align: center;
}

p {
  font-size: 2rem;
  font-weight: 100;
  text-align: justify;
}

.img1 {
  width: 25%;
  border-radius: 50%;
  margin-left: 5%;
  float: right;
}

/* Blocks */

.block {
  padding: 70px 150px;
}

.block-light {
  background-color: #fff;
  color: black; 
}

.block-dark {
  background-color: #080c14;
  color: white;  
}

/* Parrallax */

.px1, .px2, .px3 {
  position: relative;
  background-position: center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.px1 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://64.media.tumblr.com/e5bfc63c34477d3e1b648a4f09aa9afb/tumblr_p5lsy5Ac1H1uhx88zo1_500.gifv');
  min-height: 100%;
}

.px2 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://www.wallpaperflare.com/static/155/335/658/digital-art-artwork-landscape-sword-wallpaper.jpg);
  min-height: 400px;
}

.px3 {
  background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://mocah.org/uploads/posts/583541-sword-art-online.jpg);
  min-height: 400px;
}

@media(max-width: 568px) {
  .px1, .px2, .px3{background-attachment: scroll;}
}

HTML 直到图像代码：

<main id="main">

<div class="px1">
  <div class="header">
    <h2>手塚 治虫</h2>
    <h1 id="title">Osamu Tezuka</h1>
  </div>
</div>

<div class="block block-light">
  <h3>The father of anime</h3>
  <img class="img1" src="https://www.otaquest.com/wp-content/uploads/2020/03/osamu-tezuka-01.jpg"/>
  <p>Known as the Godfather of Manga and Anime, Osamu Tezuka (手塚 治虫) was born 3rd November, 1928 and died February 9th, 1989. Tezuka was a Japanese manga artist, animator and cartoonist. In 1968 he founded Tezuka Productions Co (手塚プロダクション) and Mushi Productions.</p>
</div>

<div class="px2">
  <span class="border">
    Sword Art Online
  </span>
</div>

Answer 1

我添加了display: flex; 到您的block-light class 并将所有内容与中心对齐。 此外，为了更好的措施，我添加了一个名为left的 class 到您的<p>以允许段落文本不直接反对您的图像，我添加了一些margin-left 。 我建议使用media queries来调整响应式设计的所有适用元素的大小。

 body, html, main { height: 100%; font-size: 10px; margin: 0; font-family: 'Open Sans', sans-serif; font-weight: 400; }.header { position: absolute; top: 40%; width: 100%; text-align: center; color: #fff; font-family: 'Lexend', sans-serif; } h1 { font-size: 6rem; text-transform: uppercase; letter-spacing: 3.5px; } h2 { font-size: 2rem; letter-spacing: 1rem; } h3 { text-transform: uppercase; font-size: 3rem; font-family: 'Lexend', sans-serif; text-align: center; } p { font-size: 2rem; font-weight: 100; text-align: justify; }.left { margin-left: 1.5rem; } /* media queries */ @media only screen and (max-width: 800px) {.left { font-size: 1rem; } }.img1 { width: 25%; border-radius: 50%; margin-left: 5%; float: right; } /* Blocks */.block { padding: 70px 150px; }.block-light { background-color: #fff; color: black; display: flex; align-items: center; }.block-dark { background-color: #080c14; color: white; } /* Parrallax */.px1, .px2, .px3 { position: relative; background-position: center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }.px1 { background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('https://64.media.tumblr.com/e5bfc63c34477d3e1b648a4f09aa9afb/tumblr_p5lsy5Ac1H1uhx88zo1_500.gifv'); min-height: 100%; }.px2 { background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://www.wallpaperflare.com/static/155/335/658/digital-art-artwork-landscape-sword-wallpaper.jpg); min-height: 400px; }.px3 { background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url(https://mocah.org/uploads/posts/583541-sword-art-online.jpg); min-height: 400px; } @media(max-width: 568px) {.px1, .px2, .px3{background-attachment: scroll;} }

 <main id="main"> <div class="px1"> <div class="header"> <h2>手塚 治虫</h2> <h1 id="title">Osamu Tezuka</h1> </div> </div> <div class="block block-light"> <h3>The father of anime</h3> <img class="img1" src="https://www.otaquest.com/wp-content/uploads/2020/03/osamu-tezuka-01.jpg"/> <p class="left">Known as the Godfather of Manga and Anime, Osamu Tezuka (手塚 治虫) was born 3rd November, 1928 and died February 9th, 1989. Tezuka was a Japanese manga artist, animator and cartoonist. In 1968 he founded Tezuka Productions Co (手塚プロダクション) and Mushi Productions.</p> </div> <div class="px2"> <span class="border"> Sword Art Online </span> </div>

点击整页

编辑： - 添加了一个示例media query ，将font-size更改为 800 像素以下。

Answer 2

当有足够的文本在图像周围“浮动”时，图像具有float:right设置，这很好，并且可能是您想要的。 所以它在较窄的视口上看起来不错。

在宽屏幕上，它仍然浮动到右侧，但没有足够的文字环绕它。

同样作为一个浮点数，它不会设置其容器的高度。

让系统在绘制下一个元素之前“清除”文本和图像的一种方法是使用clear: both

在你的情况下clear: both在 CSS for.px2