Question

我有这一梯子,正在与锡里的der子公司合作。每个幻灯片都有一只头(四)和另一块(绿 d)内的内容。当一位领导人的案文比其他人多时,我怎么能够把绿树同上调?

我认为,花粉碎块应该增长,但不会 up,这样绿色 d块就能够达到顶点。是否有办法这样做?

请帮助!

    const tabsSlider = document.querySelectorAll( .js-slider );
    tabsSlider.forEach(slider => {

        const tnsSlider = tns({
            container: slider,
            mouseDrag: true,
            nav: false,
            controls: false,
            items: 2,
            loop: false,
            slideBy: 2,
            mode: "carousel",
            swipeAngle: false,
            edgePadding: 30,
            speed: 400,
        });
    });

.slider-wrapper {
  display: flex;
}

.slide {
  display: flex;
  margin: 10px;
  padding: 10px;
}

.slide-heading {
  background-color: pink;
}

.slide-heading p,
.slide-heading h4{
    margin-bottom: 10px;
    margin-top: 0;
}

.slide-content {
  border: 1px solid greenyellow;
  background-color: greenyellow;
  display: flex;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/min/tiny-slider.js"></script>
<div class="slider-wrapper js-slider">
    <div class="slide">
        <div class="slide-box">
            <div class="slide-heading">
                <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
                <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
            </div><!--/.slide-heading-->
            <div class="slide-content">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio!</p>
                </div><!--/.description-->
            </div><!--/.slide-content-->
        </div><!--/.slide-box-->
    </div><!--/.slide-->
    <div class="slide">
        <div class="slide-box">
            <div class="slide-heading">
                <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
                <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
            </div><!--/.slide-heading-->
            <div class="slide-content">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio!</p>
                </div><!--/.description-->
            </div><!--/.slide-content-->
        </div><!--/.slide-box-->
    </div><!--/.slide-->
    <div class="slide">
        <div class="slide-box">
            <div class="slide-heading">
                <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
                <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
            </div><!--/.slide-heading-->
            <div class="slide-content">
                <div class="content">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio!</p>
                </div><!--/.description-->
            </div><!--/.slide-content-->
        </div><!--/.slide-box-->
    </div><!--/.slide-->
</div><!--/.slider-wrapper-->

Answer 1

为了实现你们想要的布局,你需要使用电网。 Tinyslider为布局使用弹性箱,因此不适合。

.d1 {
  display: grid;
  grid-template-rows: auto auto;    /* we want a grid with two rows of automatic height */
  grid-auto-flow: column;           /* fill the first column, then add columns as required */
  grid-auto-columns: 200px;         /* make each column 200px wide */
  gap: 2px 1em;                     
}

.d1>* {                             /* child elements are slides */
  display: contents;
}

.d1>*>* {                           /* grandchild elements are either headings or contents*/
  padding: 10px;
}

.d1>*>*:first-child {               /* first grandchild in each slide is a heading */
  background-color: pink;
  align-self: end;                  /* align the bottoms of the pink boxes */
}

.d1>*>*:last-child {                /* last grandchild in each slide is contents */
  background-color: greenyellow;
  align-self: start;                /* align the tops of the green boxes */
}

.d1>*>*>*:first-child {
  margin-top: 0;
}

.d1>*>*>*:last-child {
  margin-bottom: 0;
}

<div class="d1">
  <div>
    <div>
      <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
      <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio!</p>
    </div>
  </div>
  <div>
    <div>
      <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
      <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio! Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat.</p>
    </div>
  </div>
  <div>
    <div>
      <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
      <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio!</p>
    </div>
  </div>
  <div>
    <div>
      <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
      <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio! Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat.</p>
    </div>
  </div>
  <div>
    <div>
      <h4 class="title">Lorem ipsum dolor sit amet</h4>                    
      <p  class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores!</p>
    </div>
    <div>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore necessitatibus, aperiam quasi voluptates assumenda neque fugiat. Enim ipsa quos facere, similique, iste placeat aperiam veniam, numquam qui neque illum odio!</p>
    </div>
  </div>
</div>

友情链接