Перемещение нескольких элементов и их установка на место - PullRequest
Новая
       8

Перемещение нескольких элементов и их установка на место

0 голосов
/ 14 сентября 2018

У меня есть задание, где мне нужно использовать этот вид рабочего стола: просмотр рабочего стола баннеров

и сделайте его отзывчивым для своего мобильного просмотра:

мобильный просмотр баннеров

Когда я изначально решал эту проблему, я использовал начальную загрузку для выполнения задания, но теперь мне поручили не использовать его.

Я попробовал множество вещей, чтобы заставить его работать должным образом, но, похоже, ничего не осталось. Сначала я попробовал replaceWith () и использовал шаблонные литералы. Мне действительно удалось получить дизайн должным образом, но при работе с размером окна рабочий стол был бы разрушен, и я не мог понять, как правильно добавить логику, чтобы получить исходный вид рабочего стола.

Моя последняя попытка, я получил помощь отсюда, потому что хотел, чтобы код выглядел чище. Это моя текущая итерация: 

function checkSize() {
        if ($(window).width() < 480) {


            $(".main-container").each(function() {
                $(this).find(".head-banner #header").detach();
                $(this).find(".head-banner .discount").detach();
                //  console.log($(this).find(".body-banner img"));
                $(this).find(".body-banner img").detach().appendTo($(this).find(".head-banner"));
                $(this).find(".body-banner .supply").detach().appendTo($(this).find(".head-banner"));
                $(this).find(".head-banner .best").detach().appendTo($(this).find(".head-banner"));
                //  $(this).find('.head-banner').append(`<i class='fas fa-angle-right'>`)

            });

            $(".main-container").each(function() {
                $(this).find(".head-banner #header").appendTo(".head-banner ");
                $(this).find(".head-banner .discount").prependTo(".head-banner ");
                $(this).find(".head-banner img").appendTo($(this).find(".body-banner .wrapper"));
                $(this).find(".head-banner .supply").prepent($(this).find(".body-banner"));
                $(this).find(".head-banner .best").appendTo($(this).find(".head-banner"));
                //$(this).find('.head-banner').append(`<i class='fas fa-angle-right'>`)
            })

        }
    }
    $(window).resize(checkSize);

Проблема с этим в том, что он тоже, похоже, не возвращается к тому, что когда-то было. Наряду с этой проблемой, у меня есть созданный элемент, который инициализируется каждый раз, когда я изменяю ширину окна, когда она меньше 480. Я также не могу понять это поведение. Однако сейчас я действительно хочу выяснить начальную проблему и почему она не отвечает.

Это HTML: 

<div class="main-container">
        <div class="head-banner text-bold new-font">
            <span id="header">WEBSITE PRICE</span>
        </div>
        <div class="body-banner">
            <div class="wrapper">
                <div class="supply">
                    <p><span class="text-bold">1</span> <span class="text-medium">Month Supply</span></p>
                </div>
                <img src="./assets/1md_advtur6_500x500@2x.png" />

                <div class="discount-price">
                    <p class="text-bold">$45.00</p>
                    <p class="between"><span id="strike">$45.00 </span><span>each</span></p>
                </div>
            </div>
        </div>
</div>
        <div class="main-container">
            <div class="head-banner">
                <p class="discount">
                    <span>26</span>
                </p>
                <p class="best">
                    <span>BEST</span><br> <span id="value">VALUE</span>
                </p>
            </div>
            <div class="body-banner">
                <div class="wrapper">
                    <div class="supply">
                        <p><span class="text-bold">6</span> <span class="text-medium">Month Supply</span></p>
                    </div>
                    <img src="./assets/1md_advtur6_500x500@2x.png" />
                    <div class="discount-price">
                        <p class="text-bold">$33.17</p>
                        <p class="between"><span id="strike">$45.00 </span><span>each</span></p>
                    </div>
                </div>
            </div>
    </div>

Может ли это быть решено и с помощью CSS?

Ответы [ 2 ]

0 голосов
/ 14 сентября 2018

Это можно сделать исключительно с помощью CSS, и ваш код получится чище.

Вы можете использовать CSS Flexbox для размещения элементов на экране.

Media Queries для изменения макета в зависимости от разрешения экрана. 

body {
  display: flex;
  flex-direction: column;
}
@media (min-width:767px) {
  body {
    display: flex;
    flex-direction: row;
    }
}
<div>
  <h1>First Item</h1>
  <span>Lorem Ipsum Text</span>
</div>
<div>
  <h1>Second Item</h1>
  <span>Lorem Ipsum Text</span>
</div>
<div>
  <h1>Third Item</h1>
  <span>Lorem Ipsum Text</span>
</div>
0 голосов
/ 14 сентября 2018

Следующий пример кода поможет вам: 

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  display: inline-block;
  width: 30%;
}

input {
  visibility: hidden;
  position: absolute;
}
h1,
h1 label {
  cursor: initial;
}

@media (max-width:767px) {
  li {
    width: 100%;
  }
  input {
    display: block;
  }
  p {
    display: none;
  }
  input:checked~p {
    display: block;
  }
  h1,
  h1 label {
    cursor:pointer;
    width: 100%;
    display: block;
  }
}
<ul class="list">
  <li>
    <input type="checkbox" id="Heading 1">
    <h1><label for="Heading 1">Heading 1</label></h1>
    <p>Summary goes here...</p>
  </li>
  <li>
    <input type="checkbox" checked id="Heading 2">
    <h1><label for="Heading 2">Heading 2</label></h1>
    <p>Summary goes here...</p>
  </li>
  <li>
    <input type="checkbox" id="Heading 3">
    <h1><label for="Heading 3">Heading 3</label></h1>
    <p>Summary goes here...</p>
  </li>
</ul>
...