如何让文字确定绝对位置div的高度

编程问答 2022-06-12

问题描述

我有一个充满文本的滑块（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

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

我真的希望你们能帮助我：）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljquerypositioning