带有定制卡的Carousel carousel

Question

试图将carousel用卡片使用而不是仅仅图像使用（例如图像在左侧，文本位于卡的右侧），锚标签“ ＆lt; a class =“ carousel-item”＆gt; gt;“正在解决问题，我将其删除，我的卡状态正确，但无法移动卡，当我将其保留时，它将图像从卡片中取出并弄乱了。

/*materializecss*/
.carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px;
  perspective: 500px;
  transform-style: preserve-3d;
  transform-origin: 0% 50%; }
  .carousel.carousel-slider {
    top: 0;
    left: 0; }
    .carousel.carousel-slider .carousel-fixed-item {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 20px;
      z-index: 1; }
      .carousel.carousel-slider .carousel-fixed-item.with-indicators {
        bottom: 68px; }
    .carousel.carousel-slider .carousel-item {
      width: 100%;
      height: 100%;
      min-height: 400px;
      position: absolute;
      top: 0;
      left: 0; }
      .carousel.carousel-slider .carousel-item h2 {
        font-size: 24px;
        font-weight: 500;
        line-height: 32px; }
      .carousel.carousel-slider .carousel-item p {
        font-size: 15px; }
  .carousel .carousel-item {
    visibility: hidden;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0; }
    .carousel .carousel-item > img {
      width: 100%; }
  .carousel .indicators {
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0; }
    .carousel .indicators .indicator-item {
      display: inline-block;
      position: relative;
      cursor: pointer;
      height: 8px;
      width: 8px;
      margin: 24px 4px;
      background-color: rgba(255, 255, 255, 0.5);
      transition: background-color .3s;
      border-radius: 50%; }
      .carousel .indicators .indicator-item.active {
        background-color: #fff; }
  .carousel.scrolling .carousel-item .materialboxed,
  .carousel .carousel-item:not(.active) .materialboxed {
    pointer-events: none; }

/*custom css*/

.imp-card {
  width: 400px;
  height: 300px;
  display: flex;
  justify-content: center;
}

.image-section {
  width: 200px;
}

.pic-imp-layout {
  width: 100%;
  height: 100%;
}

.text-section {
  width: 200px;
  text-align: right;
  padding-right: 10px;
}

<div class="carousel">
  <a class="carousel-item">
    <div class="imp-card">
      <div class="image-section">
        <img class="pic-imp-layout" src="{% static 'images/img.jpg' %}">
      </div>
      <div class="text-section">
        <p class="score">Score</p>
        <p class="description"><a>&#x201C;</a> lorel ipsum<a>&#8221;</a></p>
        <p class="author">- John</p>
        <div class="like"></div>
        </div>
      </div>
    </div>
  </a>
</div>

Answer 1

找到了解决问题的课程，poleterizecss类的预定高度和宽度会创建问题，父自定义卡，并且该类应该具有相同的分辨率，并且也不能在DIV的先前存在的锚定标签中使用锚定标签，一切正常。

.carousel .carousel-item {
    width: 200px;
    height: 200px;
}