(html / css) Неправильное положение изображения на рабочем столе - PullRequest
Новая
       66

(html / css) Неправильное положение изображения на рабочем столе

2 голосов
/ 14 июля 2020

Итак, я пытался оптимизировать свой веб-сайт для разных крыс ios. Однако я не могу разместить изображение слева и текст справа на рабочем столе.

Это мой контент [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)

Ответы [ 4 ]

0 голосов
/ 14 июля 2020 

.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>
0 голосов
/ 14 июля 2020

Оберните свою статью и изображение в общий контейнер и настройте его следующим образом, используя 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>
0 голосов
/ 14 июля 2020

Используйте этот фрагмент

Я поместил тег img перед тегом статьи и использовал 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>
0 голосов
/ 14 июля 2020

Вот модифицированный код. Вы добавили тег 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>
...