时间戳

首页 > 解决方案 > (html/css) 图像在桌面上的位置不正确

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

问题描述

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

这是我的内容 [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>

为了让您了解我的问题，这里有一个屏幕截图：img 的错误定位 当您对我的问题仍有任何疑问时，您可以访问网站kevnkkm.de以查看完整的 html/css 源代码或仅评论这个问题！

提前致谢！（也很抱歉我可能造成的掌心xd）

标签： htmlcssimagemedia

解决方案

将您的文章和图像包装在一个通用容器中，并使用 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%做这个：

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

此处包含有关 Flexbox 示例的综合信息。

工作示例：

将代码段展开到整页以查看代码是否正常工作

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

推荐阅读