自动调整元素（div）以适合水平内容 [英] Autoresize Element (div) to Fit Horizontal Content

问题描述

我试过谷歌搜索，但没有提出太多。我正在建立一个水平的旋转木马，显示图像在一个LI，浮动。我想解决的问题是，每次我添加缩略图到轮播（我懒加载），我需要重新计算轮播的宽度（所有浮动的缩略图并排好排队）。

I tried googling, but didn't come up with much. I'm building a horizontal carousel which displays images in a LI, floated. The issue I want to solve is, everytime I add thumbnails to the carousel (I'm lazy loading), I need to recalculate the width of the carousel (so that all the floated thumbnails line up nicely side by side).

对于一个，我不想在JS中进行这些计算，对于两个，我发现很难找到一个跨浏览器的方式来确保宽度正确计算（我最终不得不添加或删除像素从总宽度取决于浏览器）。

For one, I rather not have to do these kinds of calculations in JS, and for two, I found that it's hard to find a cross browser way to ensure that the width will be properly calculated (I end up having to add or remove pixels from the total width depending on the browser).

所以我的问题是，有没有任何方式没有JS，能够将内容添加到div，并根据需要调整宽度，方式与div的高度相同？

So my question is, is there any way without JS, to be able to add content to a div, and have the width adjust as needed, the same way a div's height would?

如果没有，您是否找到了更高效的方法来处理这种情况比重新计算宽度每次？

And if not, have you found a more efficient way to handle this scenario than recalculating the width every time?

我不是新的web开发，并且只要我一直在这个领域，我的知识这是从来没有可能。但是随着新技术的出现，我想可能现在有一种模糊的方法来实现这一点。

I'm not new to web dev, and for as long as I've been in this field, to my knowledge this has never been possible. But with the advent of new technologies cropping up, I thought maybe there was an obscure way of achieving this now.

提前感谢！

（为了说明，但简化）：如果我的轮播显示为500像素宽，并且隐藏溢出。有一个可滑动部分包含缩略图，每个是100px宽，浮动，他们适合5在旋转木马。当用户点击下一步时，它延迟加载下一组5个缩略图，并将其附加到滑块区域后的第一组5.但由于这个div是500px宽，以容纳5个缩略图，添加另一个5，我需要重新计算宽度来获得新的缩略图并排显示。理想情况下，我想找到一种方法让div自动调整其宽度以适合水平内容，就像垂直内容的自然方式一样。

(for clarification, but simplified): If my carousel is 500px wide with overflow hidden. There's a slideable section containing thumbnails, each is 100px wide, floated, they fit 5 across in the carousel. When a user clicks Next, it lazy loads the next set of 5 thumbnails, and appends it to the slider area after the first set of 5. But since this div was 500px wide to accommodate 5 thumbnails, adding another 5, I need to recalculate the width to get the new thumbnails to show up side by side. Ideally I'd like to find a way to have the div autoresize its width to fit horizontal content, the same way it naturally does for vertical content.

推荐答案

我发现使用包含carousel div的 white-space：nowrap 和 overflow：hidden 起作用。然后对于div中的每个项目都有 display：inline-block 。

I've found that using a containing carousel div with white-space: nowrap and overflow: hidden has worked. I then have display: inline-block for each item in the div.

这篇关于自动调整元素（div）以适合水平内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！