Абсолютное положение, проблема изменения размера окна даже после преобразования в процент - PullRequest
Новая
       1

Абсолютное положение, проблема изменения размера окна даже после преобразования в процент

0 голосов
/ 25 января 2020 

$(document).ready(function() {

  //console.log($("#content").children().first());
  $("#content").append('<div id="slider"></div>');
  // initially reset
  var left = $("#content").children().first().position().left;
  var width = $("#content").children().first().width();
  $('#slider').css({
    'left': left,
    'width': width
  });

  var delay = 150,
    setTimeoutConst;
  $('.steps').hover(function() {
    var that = this;
    setTimeoutConst = setTimeout(function() {
      var left = $(that).position().left;
      var width = $("#content").children().first().width();
      $('#slider').stop().animate({
        'left': left,
        'width': width
      }, 300);
    }, delay);
  }, function() {
    clearTimeout(setTimeoutConst);
  });

})
#content {
  width: 95%;
  padding: 15px 2.5% 0px 2.5%;
  line-height: 0;
}

.steps {
  width: 20%;
  height: 150px;
  display: inline-block;
  background-color: white;
}

#slider {
  position: absolute;
  left: 0;
  height: 150px;
  width: 20%;
  background-color: rgb(240, 240, 240);
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="content-wrap">
    <div id="content">
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color:black"></div>
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color: black;"></div>
      <div class="steps" style="background-color: aqua;"></div>
    </div>
  </div>
</body>

</html>

Я создал слайдер div, который скользит при наведении на элементы div класса = "steps". Проблема в том, что когда я изменяю размер окна, ползунок div не регулирует свою ширину. Поэтому я конвертировал ширину в процентные значения. Внутри обертки есть 5 элементов div (class = "steps"), каждый с шириной = 20%, вместе с ползунком div внутри той же обертки с шириной = "20% (для соответствия ширине шагов div). Но ширина div слайдера больше, чем у div шагов. Что мне делать, чтобы слайдер div соответствовал ширине шага div и настраивал его ширину при изменении размера окна?

1 Ответ

1 голос
/ 25 января 2020

Используйте Flexbox для создания строк или столбцов элементов. Установите display: flex на элементе #content, чтобы сделать его flex-container . Все дочерние элементы в контейнере будут считаться flex-children .

CSS Tricks имеет отличное руководство по Flexbox . Обязательно посмотрите.

Вот объяснение почему display: inline-block создает пробелы, которые у вас есть в данный момент.

Вам нужно добавить несколько CSS правил, чтобы изменить размер элемента #slider. Прежде всего убедитесь, что родительский элемент или контейнер слайдера имеет position: relative. Это позиционирует каждый absolute позиционированный элемент относительно родительского элемента relative.

Теперь width: 20% на ползунке будет такой же ширины на элементе .step и заставляет ползунок изменять размер без с использованием JavaScript. Если это проблема стиля, возможно, ее можно (и нужно) исправить с помощью CSS, запомните это.

Также используйте модель border-box для комбинирования отступа и ширины элемента. По умолчанию все элементы имеют box-sizing: content-box, что добавит отступы к ширине. Например: width: 100px и padding: 0 10px 0 10px сделают ширину элемента 120px.

Использование box-sizing: border-box не добавит отступы к ширине (или высоте), а только добавит отступы внутрь элемент. У MDN есть несколько замечательных примеров , чтобы показать, как это работает.

Проверьте обновленный пример и дайте мне знать, если он работает. 

$(document).ready(function() {

  //console.log($("#content").children().first());
  $("#content").append('<div id="slider"></div>');

  var delay = 150,
    setTimeoutConst;
  $('.steps').hover(function() {
    var that = this;
    setTimeoutConst = setTimeout(function() {
      var left = $(that).position().left;
      $('#slider').stop().animate({
        'left': left,
      }, 300);
    }, delay);
  }, function() {
    clearTimeout(setTimeoutConst);
  });

})
*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
}

#content-wrap {
  width: 100%;
  padding: 15px 2.5% 0px 2.5%;
}

#content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.steps {
  width: 20%;
  height: 150px;
  background-color: white;
}

#slider {
  position: absolute;
  left: 0;
  height: 150px;
  width: 20%;
  background-color: rgb(240, 240, 240);
  display: inline-block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="script.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="content-wrap">
    <div id="content">
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color:black"></div>
      <div class="steps" style="background-color: aqua;"></div>
      <div class="steps" style="background-color: black;"></div>
      <div class="steps" style="background-color: aqua;"></div>
    </div>
  </div>
</body>

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

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

...