时间戳

首页 > 解决方案 > 如何让文本确定绝对定位 div 的高度

html - 如何让文本确定绝对定位 div 的高度

问题描述

我有一个充满文本的滑块（Cycle2）。每张幻灯片都定位：绝对；因为幻灯片需要彼此重叠。所以位置：相对；在这里不起作用。

第一张幻灯片中文本的长度决定了每张幻灯片的高度。因此，如果第二张幻灯片上的文本比第一张幻灯片上的文本长，则第二张幻灯片上的文本不会完全显示。它破坏了文本。

有一个可见性：隐藏；Cycle2 插件中的行，所以我将其设置为“可见”。这有效，但它不会改变每张幻灯片的高度。因此，结果是较长的文本将开始在其下方的元素上溢出（因为位置：absolute;）。我不想使用那种绝对定位，但这似乎是唯一的方法。

有没有办法让文本确定每张幻灯片的高度。如果没有，我的滑块是否可以只取所有幻灯片的最高幻灯片的高度？

我几乎不可能让它在 JSFiddle 中工作。这是每张幻灯片的 html。它是在液体环境中构建的，你知道的。

<div class="testimonial-slide">
 
    <div class="testimonial-slide-header">
      
        <div class="testimonial-slide-img">
            {% if testimonial_voor_slider.klant_foto_logo.src contains '.png' %}
    {% assign pngKlant = true %}
   {% else %}
    {% assign pngKlant = false %}
   {% endif %}
      
      {%- include 'includes/image/image',
      imageSource: testimonial_voor_slider.klant_foto_logo,
      imageLink: ,
      imageAlt: image.alt,
      imageClass: 'klant-logo-slide',
      imageSizes: '$-12-100px|md-4-100%|lg-6-100%',
      imageMode: 'fit',
      imageBoxed: false,
      imageLazyload: true,
      imagePng: pngKlant,
      -%}  
        </div>
        
        <div class="testimonial-slide-titles">
    <h3>{{testimonial_voor_slider.klant_naam}}</h3>
    <h4>{{testimonial_voor_slider.klant_bedrijfsnaam}}</h4>
        </div>
        
</div>
    
  <p>{{testimonial_voor_slider.testimonial_tekst}}</p> 
  
</div>

这是围绕这些幻灯片的容器的代码：

{% assign slider_class = slider_class | plus: 1 %}

<div class="{% if testimonial_slider.kleurstelling == 'licht' %} testimonial-light {% else %} {% endif %}  {{slider_class}} cycle-slideshow testimonial-slider-container" data-cycle-fx="scrollHorz" data-cycle-slides="> div" data-cycle-prev=".cycle-prev-{{slider_class}}" data-cycle-next=".cycle-next-{{slider_class}}" data-cycle-timeout="0">   
    
    <span class="buttons-wrapper">
  <span class="cycle-prev cycle-prev-{{slider_class}}"> <i class="material-icons"> arrow_back </i></span> 
  <span class="cycle-next cycle-next-{{slider_class}}"> <i class="material-icons"> arrow_forward </i></span> 
</span> 
    
  {% for testimonial_voor_slider in testimonial_slider.testimonial_toevoegen %}
    {% include testimonial_voor_slider %}
  {% endfor %}
           
</div>

Cycle2 js 应用了一些内联样式。如果你想看到它的实际效果：

https://projectfresh.mijnversewebsite.nl/#image-24491

只需循环到下一张幻灯片，您就会看到会发生什么。

我真的希望你们能帮助我:)

标签： htmljquerycsspositioningjquery-cycle2

解决方案

事实证明，Cycle2 有自己的解决方案。只需添加data-cycle-auto-height="calc"到滑块的容器 div 中。现在滑块将与最高滑块一样高。好的...

推荐阅读