Question

我有一个这样的文本框

我的CSS就是这样，

.bg-text-kol2 {
  background-color: #ffffff;
  background-size: 10px 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  -webkit-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
  box-shadow: 0px 10px 10px -8px rgba(0,0,0,0.75);
}

因为此滑块使用滑动滑块，所以这是js，

$(document).ready(function() {
  (function ($) {    
    //initialize swiper when document ready
    var swiper = new Swiper('.swiper-container', {
            slidesPerView: 2,
      spaceBetween: 20,
            centeredSlides: true,

  })(jQuery);
});

问题是如何使尺寸相同？我想让盒子是640px x 640px？

Answer 1

我认为您可以通过此演示进行操作，我试图复制您的图像。这里最重要的是您需要设置滑动器的高度，此属性可帮助插件确定滑动器的大小。

Codepen演示：https://codepen.io/DieByMacro/pen/mYxJNo

var mySwiper = new Swiper ('.swiper-container', {
    // Optional parameters
    direction: 'horizontal',
    slidesPerView: 2,
    loop: true,
    spaceBetween: 20,

    // If we need pagination
    pagination: {
      el: '.swiper-pagination',
    },

    // Navigation arrows
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

    // And if we need scrollbar
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })

.swiper-container {
  width: 100%;
  height: 600px;
}

/**
Using flex to make sure the content expand full. This makes all items height equal
*/
.swiper-item {
  display: flex;
  flex-flow: column nowrap;
}
.swiper-item .item-image {
  flex: 0 0 auto;
  background: blue;
  height: 250px;
}
.swiper-item .item-content {
  flex: 1 1 0px;
  height: auto;
  background: white;
  padding: 20px;
  width: 85%;
  margin: -30px auto 0;
}

.wrapper {
  background: lightgreen;
  padding: 10px;
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.min.js"></script>
<div class="wrapper">
   <div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide swiper-item">
          <div class="item-image">
            Image
          </div>
          <div class="item-content">
            <div class="item-content__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia unde placeat fuga reprehenderit temporibus non velit molestiae quam ipsam assumenda, quo dignissimos neque, eligendi ad in, debitis voluptatem. Eos harum praesentium facere? Quo fuga ipsum ut tenetur consequuntur veniam minus, doloremque tempora sunt ipsam dolorum reprehenderit magni excepturi ipsa quaerat voluptatum ea repudiandae assumenda placeat, earum eum cumque quis voluptates corporis! Id quis suscipit molestias, dolor laboriosam laudantium corrupti, ipsa cumque culpa tempore enim veniam saepe accusantium, natus dolores! Blanditiis quo fugiat minus iusto modi, iure earum voluptas, consequuntur qui distinctio maiores esse quae error odio cupiditate nisi veniam ad.</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide swiper-item">
          <div class="item-image">
            Image
          </div>
          <div class="item-content">
            <div class="item-content__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor sequi placeat reiciendis tenetur, illum est, ipsa esse iusto neque fugiat magnam earum nostrum deserunt, odit animi vel quas assumenda fugit obcaecati nulla! Reprehenderit eum, impedit quibusdam laborum harum unde tempore. A facilis itaque, in maiores nam reiciendis provident ducimus nesciunt, consequuntur dolorum numquam optio quis facere quisquam nemo distinctio saepe?</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide swiper-item">
          <div class="item-image">
            Image
          </div>
          <div class="item-content">
            <div class="item-content__text">
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem, neque!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, tempore!</p>
              <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex possimus quaerat omnis officiis. Quaerat dignissimos libero porro nesciunt quidem beatae assumenda. Doloremque temporibus quia soluta cum officiis odio, maxime veritatis.</p>
            </div>
          </div>
        </div>
      </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
</div>

如何使背景文字大小相同

1 个答案: