다양한 너비의 단일 선 ul이있는 CSS 컨테이너 마스크

this image과 같은 것을 만들려고합니다.다양한 너비의 단일 선 ul이있는 CSS 컨테이너 마스크

jQuery 컨베이어와 비슷하지만 jQuery를 사용하지 않고 애니메이션을 원하지 않고 '보이는'섹션을 이동하는 간단한 페이지 매김 만 수행하면됩니다.

다음은 지금까지 코드입니다 :

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Untitled Document</title> 

    <style> 
    .container { 
     width:480px; 
     height:70px; 
     background:#ff0000; 
     overflow:hidden; 
    } 

    .container ul { 
     list-style-type:none; 
     display:block;  
     margin:0; 
     padding:0; 
     width:auto; 
    } 

    .container ul li { 
     float:left; 
     display:inline; 
    } 
    </style> 
</head> 
<body> 

    <div class="container"> 
    <ul> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
     <li><img src="image.png" /></li> 
    </ul> 
    </div> 

</body> 
</html>

현재의 문제는 ul가 .container의 폭에 도달하면, 그것은 휴식과 2 개 행을 만드는 것입니다. 스트레칭을하려면 ul이 필요하고, 단지 한 행이되어야하며, 컨테이너에 가려져 있어야합니다.

데이터베이스에서 가져온 이미지의 양이 일정하지 않으므로 항상 ul의 너비가 변경됩니다. 컨테이너 폭과 li 너비는 항상 동일합니다.

저는 이것을 이해할 수 없으며 jQuery/Javascript를 피하고 싶습니다.

출처

2011-09-28 ahainen

왜 당신은 자바 스크립트를 피하고 있습니까? 그것은 이런 종류의 일을 아주 잘합니다. 당신은 "jQuery 회전식과 같지만 jQuery가 아닌"말은 조금 이상합니다. – Alex

페이지를 렌더링 할 때 style 속성을 사용하여 <ul>에 직접 너비를 설정하십시오. <li> 폭이 항상 일정 할 것이기 때문에, 폭은 다음과 같습니다 서버 측 언어로 PHP를 가정

number of images returned * li width

, 그것과 같이 뭔가 될 것이다 :

<div class="container"> 
    <ul style="width: <?php echo $count_imgs * CONSTANT_WIDTH ?>px"> 
     // echo your image <li>'s 
    </ul> 
</div>

가 여기에 작업 그것의 an example입니다.

페이지를 렌더링하는 동안 너비를 설정하는 옵션이 없으면 <ul>에서 임의의 큰 너비를 정의 할 수 있습니다. 당신이 당신의 목록의 끝에 빈 공간으로 끝날 것이기 때문에 그것이 좋지 않을 것입니다.

출처

2011-09-29 00:40:28 Pat

inline-block을 사용하면이 작업을 수행 할 수 있습니다. 그것들을 사용할 때 부모에게 white-space: nowrap을 추가 할 수 있습니다. 따라서 그들은 새로운 줄을 뛰어 넘지 않을 것이고, 예를 들어 첫 번째 li에 음수 여백을 사용하여 스크롤 할 수 있습니다.

여기에 당신이이 동작을 표시하기위한 바이올린을 만든 : http://jsfiddle.net/kizu/qrmC5/ 또한

는, IE에 대한 display:inline;zoom:1; 수정을 잊지이 조건부 주석에 블록 레버 inline-block들 TI 추가하지 마십시오.

출처

2011-10-01 21:24:24 kizu

다양한 너비의 단일 선 ul이있는 CSS 컨테이너 마스크

답변

관련 문제