Alexsander's questions

max-height: 400px指定整个网格的约束。但是子元素超出了限制，尽管它们应该height相对于父元素的大小进行拉伸。

https://codepen.io/Alexxxsander/pen/XWOGedj

<div class="grid">
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
  </div>

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  max-height: 400px;
  gap: 10px;
}

.grid__col {
  height: 100%;  
}

.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.grid__col:last-child {
   grid-column: 3 / -1;
 }

.grid__col img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

如何在React模块样式表中指定 2 个变量？

一个作为类，另一个作为值。
我的变体给我一个错误。

import styles from "styles.module.scss";

let number = 1;

document.body.classList.add(`${styles.is_`${number}`}`);

为什么swiper断点不起作用？在 640px responsive时，它​​不会将allowTouchMove: false更改为allowTouchMove: true。

var swiper = new Swiper(".comment-content__slider", {
      spaceBetween: 1,
      slidesPerView: 2,
      centeredSlides: true,
      slidesPerView: "auto",
      allowTouchMove: false,
      autoplay: {
        delay: 4000,
        disableOnInteraction: false,
      },
      loop: true,
      loopAdditionalSlides: 4,
      navigation: {
        nextEl: ".swiper-custom-button-next",
        prevEl: ".swiper-custom-button-prev"
      },
      breakpoints: {
        640: {
          allowTouchMove: true,
        },
      }
      });

为什么有些图标不起作用？(这是一个免费图标)

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

div {
  height: 100px;
  width: 100px;
  background-color: red;
}

.fa-location-dot {
  font-size: 40px;
  color: #222;
}

<div>
  <i class="fa-solid fa-location-dot"></i>
</div>