2013-03-29 2 views
1

휴대 기기 용 스 와이프 js로 작업 할 때, 하나 대신 두 개의 div를 표시하는 방법을 배울 수 없습니다.스 와이프 js 맞춤 너비

Live Sample here

CSS

body { 
    font-family: arial; 
} 
.swipe { 
    overflow: hidden; 
    visibility: hidden; 
    position: relative; 
} 
.swipe-wrap { 
    overflow: hidden; 
    position: relative; 
} 
.swipe-wrap > div { 
    font-size: 90px; 
    font-weight: bold; 
    float:left; 
    width: 100%; 
    position: relative; 
} 

<div id='mySwipe' class='swipe'> 
    <div class='swipe-wrap'> 
    <div>0</div> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
    <div>7</div> 
    <div>8</div> 
    <div>9</div> 
    <div>10</div> 
    <div>11</div> 
    <div>12</div> 
    <div>13</div> 
    <div>14</div> 
    </div> 
</div> 


<div> 
    <button class='prev' onclick='mySwipe.prev()'>prev</button> 
    <button class='next' onclick='mySwipe.next()'>next</button> 
</div> 

답변

3

간단한 HTML,이 같은 속임수 : http://jsfiddle.net/Gajotres/tFFAt/

HTML 변화 :

<div id="projects"> 
    <div id='mySwipe' class='swipe'> 
     <div class='swipe-wrap'> 
      <div> 
      <div>0</div> 
      <div>1</div>    
      </div> 
      <div> 
      <div>2</div> 
      <div>3</div>   
      </div> 
      <div> 
      <div>4</div> 
      <div>5</div>    
      </div> 
      <div> 
      <div>6</div> 
      <div>7</div>    
      </div> 
      <div> 
      <div>8</div> 
      <div>9</div>    
      </div> 
      <div> 
      <div>10</div> 
      <div>11</div>   
      </div>   
      <div> 
      <div>12</div> 
      <div>13</div>  
      </div> 
      <div> 
      <div>14</div>   
      </div> 
     </div> 
    </div> 

CSS 변화 :

.swipe-wrap div div { 
    display: inline-block; 
    width: 48%;  
} 
+1

야호! 고마워요.이게 정확히 제가 찾던 내용입니다. :) – Rob

관련 문제