(html/css) 图片在桌面上的位置不正确

Question

所以我试图针对不同的比率优化我的网站。但是我无法在桌面上将图像定位在左侧，将文本定位在右侧。

这是我的内容[html]（文字和图片）：

.wrapper{
    width: 100%;
}

.wrapper img-info{
    width: 100%;
}

.img-info h2{
    width: 100%;
    padding: 30px 30px 20px;
    font-size: 50px;
    color: #111;
    line-height: 44px;
}

.img-info p{
    padding: 0px 30px 20px;
    font-size: 16px;
    color: #111;
    line-height: 24px;
}

.startseite-img{
    width: 100%;
}

@media only screen and (min-width:768px){
    
    .wrapper{
        width: 600px;
        margin: 0 auto;
    }
    
    .img-info h2{
        width: 100%;
        padding: 20px 0px 0px;
    }
    
    .img-info p{
        padding: 20px 0px 0px;
    }
    
    .startseite-img{
        padding-top: 30px;
    }
}

@media only screen and (min-width:1000px){
    
    .wrapper{
        width: 1000px;
    }
    
    .wrapper img-info{
        width: 50%;
        float: right;
    }
    
    .img-info h2{
        padding: 20px 0px 0px 30px;
    }
    
    .img-info p{
        padding: 20px 0px 0px 30px;
    }
    
     .startseite-img{
        padding-top: 0px;
        width: 50%;
        float: left;
    }
}

<div class="wrapper">
  <article class="img-info">
    <h2>Hi!</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua.</p>
  </article>
  <img class="startseite-img" src="https://via.placeholder.com/150">
</div>

为了让您了解我的问题，请看截图：false positioning with the img 当你对我的问题还有任何疑问时，你可以访问网站 kevnkkm.de 查看完整的 html/css 源代码或者只是评论这个问题！

提前致谢！（也很抱歉我可能造成的面部伤害 xd）

Answer 1

这是修改后的代码。您在文本后添加了 img 标签，使图像位于文本下方。

<div class="wrapper">
            <img class="startseite-img" src="16.9%20Placeholder.png">
            <article class="img-info">
                <h2>Hi!</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </article>
            
        </div>

Answer 2

将您的文章和图像包装在一个公共容器中，并使用 Flexbox（在您最大的媒体查询中）像这样设置它：

  .article-container {
    display: flex;
    flex-direction: row;
  }
  .article-container article {
    flex: 1 0 75%;
    order: 2;
  }
  
  .article-container .startseite-img {
    flex: 1 0 25%;
    order: 1;
  }

在 Flexbox 中，您可以在不触及 HTML 代码的情况下重新排列元素。这就是 order: 1 所做的。

flex: 1 0 75% 这样做：

第一个数字表示元素应该如何增长。
第二个数字表示元素应该如何收缩。
第三个值是计算实际增长和收缩值时将使用的基础。

Comprehensive info with examples on Flexbox here.

工作示例：

将代码段展开到整页以查看有效代码

.wrapper {
  width: 100%;
}

.wrapper img-info {
  width: 100%;
}

.img-info h2 {
  width: 100%;
  padding: 30px 30px 20px;
  font-size: 50px;
  color: #111;
  line-height: 44px;
}

.img-info p {
  padding: 0px 30px 20px;
  font-size: 16px;
  color: #111;
  line-height: 24px;
}

.startseite-img {
  width: 100%;
}

@media only screen and (min-width:768px) {
  .wrapper {
    width: 600px;
    margin: 0 auto;
  }
  .img-info h2 {
    width: 100%;
    padding: 20px 0px 0px;
  }
  .img-info p {
    padding: 20px 0px 0px;
  }
  .startseite-img {
    padding-top: 30px;
  }
}

@media only screen and (min-width:1000px) {
  .wrapper {
    width: 1000px;
  }
  .article-container {
    display: flex;
    flex-direction: row;
  }
  .article-container article {
    flex: 1 0 75%;
    order: 2;
  }
  
  .article-container .startseite-img {
    flex: 1 0 25%;
    order: 1;
  }
  .wrapper img-info {
    width: 50%;
    float: right;
  }
  .img-info h2 {
    padding: 20px 0px 0px 30px;
  }
  .img-info p {
    padding: 20px 0px 0px 30px;
  }
}

<div class="wrapper">
  <div class="article-container">
    <article class="img-info">
      <h2>Hi!</h2>
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et dolore magna aliquyam erat, sed diam voluptua.</p>
    </article>
    <img class="startseite-img" src="16.9%20Placeholder.png">
  </div>
</div>

Answer 3

使用这个片段

我把 img 标签放在 article 标签之前，并使用 flex 在列中显示它们

.wrapper{
    width: 100%;
    display:flex;
    justify-content:space-around; 
}
.wrapper .startseite-img{
  max-width:100%;
  width:400px;
  height:400px;
  max-height:auto;
  margin-right:1em;
}
.wrapper img-info{
    width: 100%;
}

.img-info h2{
    width: 100%;
    padding: 30px 30px 20px;
    font-size: 50px;
    color: #111;
    line-height: 44px;
}

.img-info p{
    padding: 0px 30px 20px;
    font-size: 16px;
    color: #111;
    line-height: 24px;
}


@media only screen and (min-width:768px){
    
    .wrapper{
        margin: 0 auto;
    }
    
    .img-info h2{
        width: 100%;
        padding: 20px 0px 0px;
    }
    
    .img-info p{
        padding: 20px 0px 0px;
    }
    .wrapper .startseite-img{
        margin-right:1em;
        margin-top:1em;
  }

}

@media only screen and (min-width:1000px){
    
    .wrapper{
        width: 1000px;
    }
    
    .wrapper img-info{
        width: 50%;
        float: right;
    }
    
    .img-info h2{
        padding: 20px 0px 0px 30px;
    }
    
    .img-info p{
        padding: 20px 0px 0px 30px;
    }
    .wrapper .startseite-img{
        margin-right:1em;
        margin-top:1em;
     }
    
 }

<!DOCTYPE html>
<html lang="en">
<head>
  <title>image-on-left</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="wrapper">
            <img class="startseite-img" src="https://www.motocms.com/blog/wp-content/uploads/2018/07/css-main-image.jpg">
            <article class="img-info">
                <h2>Hi!</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </article>
        </div>
</body>
</html>

Answer 4

.wrapper{
    width: 100%;
}

.wrapper .img-info{
    width: 100%;
}

.img-info h2{
    width: 100%;
    padding: 30px 30px 20px;
    font-size: 50px;
    color: #111;
    line-height: 44px;
}

.img-info p{
    padding: 0px 30px 20px;
    font-size: 16px;
    color: #111;
    line-height: 24px;
}

.startseite-img {
    width: 100%;
}

@media only screen and (min-width:768px){
    
    .wrapper{
        width: 600px;
        margin: 0 auto;
    }
    
    .img-info h2{
        width: 100%;
        padding: 20px 0px 0px;
    }
    
    .img-info p{
        padding: 20px 0px 0px;
    }
    
    .startseite-img{
        padding-top: 30px;
    }
}

@media only screen and (min-width:1000px){
    
    .wrapper{
        width: 1000px;
    }
    
    .wrapper .img-info{
        width: 50%;
        float: right;
    }
    
    .img-info h2{
        padding: 20px 0px 0px 30px;
    }
    
    .img-info p{
        padding: 20px 0px 0px 30px;
    }
    
     .startseite-img{
        padding-top: 0px;
        width: 50%;
        float: left;
    }
}

<div class="wrapper">
  <article class="img-info">
    <h2>Hi!</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua.</p>
  </article>
  <img class="startseite-img" src="https://via.placeholder.com/150">
</div>

(html/css) 图片在桌面上的位置不正确

(html/css) Position of image not correct on desktop

html

css

media

image