Как заставить все элементы двигаться при изменении размера окна - PullRequest
Новая
       1

Как заставить все элементы двигаться при изменении размера окна

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

Когда я изменяю размер windows слева направо, # flower-background-1 и #welcome переместятся вправо; однако два изображения цветов ниже (img-1 и img-2) не смещаются вправо. Что мне сделать, чтобы все они двигались вправо и выровнялись? 

#flower-background-1 {
  background-image: url("https://www.fiftyflowers.com/blog/wp-content/uploads/iStock-659171982-1170x449.jpg");
  height: 300px;
  width: 900px;
  background-repeat: no-repeat;
  margin-left: auto;
  margin-right: auto;
}

#welcome {
  font-family: 'Great Vibes', cursive;
  font-size: 50px;
  border: 2px solid white;
  color: white;
  width: auto;
  text-align: center;
  position: relative;
  bottom: 150px;
  background-color: indigo;
}

.image-1 {
  height: 200px;
  width: 200px;
  margin-left: 114px;
  border: 2px solid red;
  position: relative;
  left: 100px;
}

.image-2 {
  height: 200px;
  width: 200px;
  border: 2px solid red;
  position: relative;
  left: 200px;
}
<head>
</head>
<div id="flower-background-1"></div>
<div id="welcome">Welcome to my Flower Shop</div>

<body>
  <img class="image-1" src="https://cdn.shopify.com/s/files/1/1204/3320/products/46801850054_ea0cb77ced_o_800x800.jpg?v=1554836834">
  <img class="image-2" src="https://www.1800flowers.com/blog/wp-content/uploads/2019/07/160080m-274x300.jpg">

Ответы [ 3 ]

1 голос
/ 12 июля 2020

ответ d_ugRiddle неплох, но я бы предложил сбросить маржу, а также положение изображений:

CSS

.image-1 {
  height: 200px;
  width: 200px;
  border: 2px solid red;
  position: relative;
  left: 200px;
}

.image-2 {
  height: 200px;
  width: 200px;
  border: 2px solid red;
  position: relative;
  left: 200px;
}
#content {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 900px) {
    .image-2, .image-1 {
        margin: 0;
        position: static;
    }
}

HTML

<div id="flower-background-1"></div>
<div id="welcome">Welcome to my Flower Shop</div>
<div id="content">
  <img class="image-1" src="https://cdn.shopify.com/s/files/1/1204/3320/products/46801850054_ea0cb77ced_o_800x800.jpg?v=1554836834" />
  <img class="image-2" src="https://www.1800flowers.com/blog/wp-content/uploads/2019/07/160080m-274x300.jpg" />
</div>
1 голос
/ 12 июля 2020

Вероятно, самый простой способ - создать контейнер содержимого, окружающий изображения, и установить его ширину в соответствии с вашим цветочным фоном с автоматическим полем для его центрирования. 

<div id="flower-background-1"></div>
<div id="welcome">Welcome to my Flower Shop</div>
<div id="content">
  <img class="image-1" src="https://cdn.shopify.com/s/files/1/1204/3320/products/46801850054_ea0cb77ced_o_800x800.jpg?v=1554836834">
  <img class="image-2" src="https://www.1800flowers.com/blog/wp-content/uploads/2019/07/160080m-274x300.jpg">
</div>

#content {
  width: 900px;
  margin: 0 auto;
}
0 голосов
/ 12 июля 2020

В вашем коде много ошибок. Ваш документ HTML недействителен. вы должны полностью это изменить. Ваш CSS тоже написан нехорошо. я исправил все для вас. Замените код HTML & CSS на этот код: 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="flower-background-1"></div>
    <p id="welcome">Welcome to my Flower Shop</p>
    <div class="img-container">
      <img
        class="image-1"
        src="https://cdn.shopify.com/s/files/1/1204/3320/products/46801850054_ea0cb77ced_o_800x800.jpg?v=1554836834"
      />
      <img
        class="image-2"
        src="https://www.1800flowers.com/blog/wp-content/uploads/2019/07/160080m-274x300.jpg"
      />
    </div>
  </body>
</html>

CSS: 

 #flower-background-1 {
    background-image: url("https://www.fiftyflowers.com/blog/wp-content/uploads/iStock-659171982-1170x449.jpg");
    height: 300px;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .img-container {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: 0 auto;
  }

  #welcome {
    font-family: "Great Vibes", cursive;
    font-size: 50px;
    border: 2px solid white;
    color: white;
    width: auto;
    text-align: center;
    position: relative;
    bottom: 150px;
    background-color: indigo;
  }

  .image-1 {
    height: 200px;
    width: 200px;
    margin-right: 114px;
    border: 2px solid red;
  }

  .image-2 {
    height: 200px;
    width: 200px;
    border: 2px solid red;
  }

Ваши проблемы будут решены. Wi sh это вам поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...