画廊滑块的 CSS 帮助答案

【问题标题】：css help with gallery slider画廊滑块的 CSS 帮助
【发布时间】：2011-11-18 16:15:59
【问题描述】：

例如，我有五个 div，它们具有 float:left，它们被包裹在 div 中，具有 display:inline-block 和 width:auto。因此结果是一行有 5 个 div，并且该行的宽度 = 子项的总和，因为 div 上的 width:auto 具有 display:inline-block 导致宽度适合内容。然后我已经全部包裹在 div 中，它的宽度 = 5 个 div 之一的宽度和溢出：隐藏，所以只有 5 个 div 中的一个是可见的。但问题是，这 5 个 div 现在不是在行中，而是在列中，因为它们的父级被包裹在 div 内，宽度 = 5 个 div 之一的宽度。我需要在这 5 个 div 中的第一个上设置左边距动画，以便下一个 div 变得可见。但是当那些 div 在列中而不是在行中时，动画时的外观不是我想要的。那么如何制作这样的东西：

 ------1-------
 | -----------|---------2----------
 | | ----3--- | -----3-- --3----- |
 | | |      | | |      | |      | |
 | | |      | | |      | |      | |
 | | -------- | -------- -------- |
 | |          |                   |
 | -----------|--------------------   
 --------------

只有 1 个必须可见。 1 的宽度 = 宽度为 3 并且溢出：隐藏，因此只有 3 中的第一个是可见的。 2 有 display:inline-block 和 width:auto，所以它的宽度适合内容。 3 有左浮动或显示：内联块。

问题是当我将 2 包装成 1 时，2 的宽度不适合内容，而是 1 的宽度并变成列而不是行。

<div-1 style="overflow:hidden;width:64px;height:64px">
  <div-2 style="display:inline-block;width:auto">
     <div-3 style="width:64px;height:64px;float:left"></div>
     <div-3 style="width:64px;height:64px;float:left"></div>
     <div-3 style="width:64px;height:64px;float:left"></div>
  </div>
</div>

Div-2 是行，但是当我将它包装在 div-1 中时，它变成了列，这是出乎意料的。对不起我的英语。

【问题讨论】：

标签： css

【解决方案1】：

看看carouFredSel jQuery plugin，它会自动调整滑块的大小以适应新幻灯片的内容。

【讨论】：

【解决方案2】：

如果要浮动其内容，首先应将 clearfix 添加到 div2。

你可以用

计算宽度

var width = $('.div2').innerHeight();

$('.div2').css('width', width);

这里举个例子，设置.div1 { overflow: visible}看结果：

http://jsfiddle.net/karameloso/Apz7B/

【讨论】：