CSS 도움말 (갤러리 슬라이더 포함)

Question

예를 들어 5 개의 div가 있는데, float : left가 있고 div : 내부에 래핑되어 표시 : 인라인 블록 및 너비 : auto가 있습니다. 결과는 5 div가있는 한 행이며 width : auto의 div, display : inline-block의 결과는 내용에 맞게 너비가되므로 width = childs의 합계입니다. 그럼 div 안에 모두 싸서, width = 너비가 5 div와 overflow : hidden이므로 해당 div 중 하나만 표시됩니다. 그러나 문제는 5 개의 div가 현재 행에 없지만 열에 있습니다. 부모가 div의 너비 = 5 개의 div 중 하나의 div로 감싸 졌기 때문입니다. 5 개 div 중 첫 번째에 margin-left가 있어야하므로 다음 div가 표시됩니다. 그러나 div가 열에 있고 행에 없을 때 애니메이션을 적용하는 동안 모양과 느낌은 내가 원하는 것이 아닙니다. 이렇게하면 어떻게됩니까?

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

오직 하나만 볼 수 있어야합니다. 1의 너비는 너비가 3이고 오버플로 : 숨김이므로 3의 처음 만 보입니다. 2에는 인라인 블록과 너비가 자동으로 표시되므로 내용이 너비에 맞습니다. 3 플로트가 남았거나 표시 : 인라인 블록.

문제는 2를 1로 감싸고 2의 너비가 conent에 맞지 않지만 너비가 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 안에 랩핑하면 열이되어 예상치 못한 결과가 발생합니다. 영어로 죄송합니다.

Answer 1

먼저 내용을 플로팅하는 경우 div2에 clearfix를 추가해야합니다.

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

:

당신은 여기

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

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

예와 폭을 계산할 수있는 결과를 볼 수 .div1 { overflow: visible} 설정

Answer 2

carouFredSel jQuery plugin을 살펴보면 새로운 슬라이드의 내용에 맞게 슬라이더의 크기가 자동으로 조정됩니다.