javascript - 根据 slider 中的不同子项计算正确的 div 高度？

Question

我在 <div> 中有一个 slider . slider 采用一组幻灯片，每个元素都有一个文本，其中文本没有字数限制。当我向左或向右滑动时，不同的文字有不同的长度，<div> 的高度变化，使它看起来很难看。我尝试使用 min-height或 fixed height , 但这些并不能解决问题，因为文本下方的空白空间太多，或者文本偶尔会比最小高度和 <div> 的大小长。会再次发生变化。

我现在能做什么？有没有办法找出 div 应该具有的最大高度(基于我的幻灯片数组中最长的文本是什么)然后给我的 div 这个高度？这样，较短的文本仍然会有一些空白，但至少不会随意。

这听起来像是一个不错的解决方案吗？我想知道如何事先测量这个？所以我很感谢任何线索!

Answer 1

如果我了解你的情况，你有一个<div>包装多个“幻灯片元素”的元素，其中；

• 每个幻灯片元素的高度根据其文本内容而变化，
• 您希望包装 div 自然扩展以适应所有幻灯片，而不管其内容的任意高度

一个解决方案是使用 flex-box这将允许您的幻灯片在包装器 div 内水平排列，同时确保包装器自然扩展以适应它的子项(任意高度)。

为了说明这种方法，请考虑以下示例，其中使用 flexbox 确保粉色 div 正确包裹绿色幻灯片(不同高度):

#wrapper {
  display:flex;
  flex-direction:row;
  overflow-x:scroll;      
  background:pink;
}

#wrapper > div {
  min-width:30rem;
  margin:1rem;
  background:green;
}

<div id="wrapper">
  <div><p>Short</p></div>
  <div><p>Tallest<br>Tallest<br>Tallest<br>Tallest<br>Tallest</p></div>
  <div><p>Tall<br>Tall<br>Tall</p></div>
</div>