Question

我有五个div，它有float：left并且它们被包装在div中，它有display：inline-block和width：auto。因此，结果是一行有5个div，并且该行的宽度=孩子的总和，因为宽度：自动在div上，有显示：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有显示：内联块和宽度：自动，所以它的宽度适合内容。 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中时，它变成了列，这就是意外。抱歉我的英文。

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：0)

Answer 1

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

Answer 2

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

您可以使用

计算宽度

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

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

这是一个示例，设置.div1 { overflow: visible}以查看结果：

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

css帮助库滑块

2 个答案: