1

Верстаю таблицу с рейтингом отзывов товара, нужны полоски, которые отображают наглядно сколько проголосовало в процентном соотношении за какую оценку товара. Прикрепляю скриншот html структуры, css кода. JS код не прикрепляю, т. к. это (наверное) баг на уровне CSS.

На скриншоте может быть не видно, в чем заключается проблема (его прикрепляю 5), описываю суть проблемы: я задаю контейнеру полоски высоту 2px, а ее дочерним элементам .background и .filled { height: 100% } , позиционирую их абсолютно относительно relative контейнера. Когда открываю результат в браузере, какие-то из полосок отклоняются от заданной высоты, визуально видно разницу в их высоте, хотя если посмотреть через инспектор - все ок, и там и там 2px. Ранее сталкивался с таким только когда использовал transform для элементов, сейчас не сосем понимаю природу этого явления. Заранее спасибо. !!!!! ЭТО ПОВЕДЕНИЕ ВОЗНИКАЕТ тогда, когда я задаю между итемами отступ:

.percentage .percentage__item:not(:last-child) {
  margin-bottom: 17px;
}

Если убрать эту строку - этого нет, но, мне отступ нужен, и я хочу понять почему это возникает.

html css 1 css 2 css 3 result

.percentage {
  display: flex;
  flex-direction: column;
  outline: 1px solid red;
  height: 100%;
  color: black;
  font-size: 1em;
}
.percentage .percentage__item {
  display: flex;
  align-items: center;
}
.percentage .percentage__item:not(:last-child) {
  margin-bottom: 17px;
}
.percentage .percentage__item > .ls {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.percentage .percentage__item > .ls .band {
  display: inline-block;
  height: 2px;
  background: #ccc;
  width: 155px;
  margin: 0 15px;
  border-radius: 15px;
  position: relative;
  box-sizing: border-box;
}
.percentage .percentage__item > .ls .band .filled {
  box-sizing: border-box;
  position: absolute;
  height: 2px;
  width: 0;
  display: inline-block;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #6B5EA4;
  z-index: 2;
}
<div class="percentage">

  <div class="percentage__item">
    <div class="ls">
      <div class="evaluation-value">5</div>
      <div class="band">
        <div class="filled"></div>
      </div>
    </div>
    <div class="rs">
      <div class="percentage__value">81%</div>
    </div>
  </div>
  <div class="percentage__item">
    <div class="ls">
      <div class="evaluation-value">4</div>
      <div class="band">
        <div class="filled"></div>
      </div>
    </div>
    <div class="rs">
      <div class="percentage__value">9%</div>
    </div>
  </div>
  <div class="percentage__item">
    <div class="ls">
      <div class="evaluation-value">3</div>
      <div class="band">
        <div class="filled"></div>
      </div>
    </div>
    <div class="rs">
      <div class="percentage__value">4%</div>
    </div>
  </div>
  <div class="percentage__item">
    <div class="ls">
      <div class="evaluation-value">2</div>
      <div class="band">
        <div class="filled"></div>
      </div>
    </div>
    <div class="rs">
      <div class="percentage__value">2%</div>
    </div>
  </div>
  <div class="percentage__item">
    <div class="ls">
      <div class="evaluation-value">1</div>
      <div class="band">
        <div class="filled"></div>
      </div>
    </div>
    <div class="rs">
      <div class="percentage__value">4%</div>
    </div>
  </div>

</div>

14
  • У вас случайно не изменен маштаб страницы? 14 апр 2021 в 8:47
  • нет, масштаб не изменен.
    – leoriyes
    14 апр 2021 в 8:52
  • На данном сайте приятно выкладывать воспроизводимый пример, дабы можно было скопировать/запустить и т.д., а не скриншот) 14 апр 2021 в 8:53
  • 1
    Я там предложил правку, не знаю видите ли вы ее, но если да, то вставьте туда скомпилированный scss код в css секцию. 14 апр 2021 в 9:05
  • 1
    +1 недавно сталкивался с чем-то подобным в border, и не смог разобраться почему в некоторых случаях border-left: 1px выглядит как 1, а в некоторых как 2 пикселя.
    – Crus
    14 апр 2021 в 11:30

1 ответ 1

3

А вот тут, вроде, вёрстка нормальная

class Review {
  #nodePrivate = null;

  constructor(reviews) {
    if (Array.isArray(reviews)) {
      this.#nodePrivate = this.#generateDomItem(reviews);
    } else {
      throw 'Вы передали в конструктор Review не массив';
    }
  }

  #generateDomItem(reviews) {
    const domItem = document.createElement('div');
    domItem.classList.add('reviews');
    domItem.innerHTML = reviews.map(item => {
      return `
        <div class="review reviews__item" style="--percentage: ${item.percentage}">
          <div class="review__left">
            ${item.value}
          </div>
          <div class="review__line">
          </div>
          <div class="review__right">
            <span>%</span>
          </div>
        </div>
      `;
    }).join('\n');
    return domItem;
  }
  
  get node() {
    return this.#nodePrivate;
  }
}

const review1 = new Review([
{
  value: 5,
  percentage: 54
},
{
  value: 4,
  percentage: 16
},
{
  value: 3,
  percentage: 20
},
{
  value: 2,
  percentage: 10
}
]);
document.body.append(review1.node);
* {
  box-sizing: border-box;
}

.reviews {
  display: grid;
  grid-gap: 10px;
  max-width: 200px;
}

.review {
  width: 100%;
  display: grid;
  grid-template-columns: fit-content(10%) 1fr fit-content(10%);
  grid-gap: 10px;
  align-items: center;
  
  --percentage: 0;
  --colorLine: #ccc;
  --colorLineActive: #6B5EA4;
}

.review__line {
  height: 6px;
  overflow-x: hidden;
  position: relative;
}

.review__line::before,
.review__line::after
{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  background-color: var(--colorLine);
  transform-origin: 0 0;
  border-radius: 5px;
}

.review__line::after {
  background-color: var(--colorLineActive);
  --width: calc(var(--percentage) * 1%);
  width: var(--width);
}

.review__right {
  display: flex;
  counter-reset: percent var(--percentage);
}

.review__right::before {
  content: counter(percent);
  display: inline-block;
  position: static;
  
}

Другой вариант (типа с реальными данными, которые могут прийти с сервера):

class Review {
  #nodePrivate = null;

  constructor(reviews) {
    if (Array.isArray(reviews)) {
      this.#nodePrivate = this.#generateDomItem(reviews);
    } else {
      throw "Вы передали в конструктор Review не массив";
    }
  }

  #generateDomItem(reviews) {
    const reviewsObj = this.#generateReviewsObj(reviews);
    console.log(reviewsObj);
    const reviewsNode = document.createElement('div');
    reviewsNode.classList.add('reviews-info__table');
    reviewsNode.innerHTML = reviewsObj.arr
      .map((item) => {
        return `
          <div class="review reviews-info__table-item" style="--percentage: ${item.percent}">
            <div class="review__left">
              ${item.value}
            </div>
            <div class="review__line">
            </div>
            <div class="review__right">
              <span>%</span>
            </div>
          </div>
        `;
      })
      .join("\n");
      
    const reviewsInfo = document.createElement('div');
    reviewsInfo.classList.add('reviews-info');

    const reviewsInfoLeft = document.createElement('div');
    reviewsInfoLeft.classList.add('review-point');
    reviewsInfoLeft.innerHTML = `
      <span class="review-point__total">
        ${reviewsObj.point}
      </span>
      <span class="review-point__prompt">
        По результатам ${reviewsObj.quantityTotal} отзывов
      </span>
    `;

    reviewsInfo.prepend(reviewsInfoLeft);
    reviewsInfo.append(reviewsNode);

    return reviewsInfo;
  }

  #generateReviewsObj(reviews) {
    const quantityTotal = reviews.map((item) => item.quantity).reduce((acc, curr) => acc + curr);
    const arrPercentage = reviews.map((item) => {
      return {
        ...item,
        percent: Math.round((item.quantity / quantityTotal) * 100),
      };
    });
    const pointTotal = reviews.reduce((acc, curr) => {
      return acc + curr.value * curr.quantity;
    }, 0);
    const objReviews = {
      quantityTotal: quantityTotal,
      arr: arrPercentage,
      point: Math.round((pointTotal / quantityTotal) * 10) / 10,
    };
    return objReviews;
  }

  get node() {
    return this.#nodePrivate;
  }
}

const review1 = new Review([
  {
    value: 5,
    quantity: 150,
  },
  {
    value: 4,
    quantity: 40,
  },
  {
    value: 3,
    quantity: 30,
  },
  {
    value: 2,
    quantity: 20,
  },
  {
    value: 1,
    quantity: 15,
  },
]);
document.body.append(review1.node);
* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.reviews-info {
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.reviews-info__table {
  display: grid;
  grid-gap: 10px;
  flex: 1;
}

.review {
  width: 100%;
  display: grid;
  grid-template-columns: 20px minmax(100px, 1fr) 40px;
  grid-gap: 10px;
  align-items: center;
  
  --percentage: 0;
  --colorLine: #ccc;
  --colorLineActive: #6B5EA4;
}

.review__line {
  height: 6px;
  overflow-x: hidden;
  position: relative;
}

.review__line::before,
.review__line::after
{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  background-color: var(--colorLine);
  transform-origin: 0 0;
  border-radius: 5px;
}

.review__line::after {
  background-color: var(--colorLineActive);
  --width: calc(var(--percentage) * 1%);
  width: var(--width);
}

.review__right {
  display: flex;
}

.review__right::before {
  counter-reset: percent var(--percentage);
  content: counter(percent);
  display: inline-block;
  position: static; 
}

.review-point {
  display: grid;
  grid-gap: 5px;
  max-width: 120px;
}

.review-point__total {
  font-weight: bold;
  font-size: 2em;
  line-height: 1;
}

.review-point__prompt {
  color: gray;
}

1
  • Да, отметил как полезный ответ, но всё-таки хочу узнать конкретно причину такого поведения у элементов в моём примере. Спасибо.
    – leoriyes
    14 апр 2021 в 12:42

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.