2013-08-30 3 views
2

나는 작업하고있는 사이트의 모든 사용자를 표시하는 Carroussel 스크립트를 가지고 있습니다. 이 carroussel은 사용자의 아바타를 표시합니다. ...다른 높이로 여러 이미지 수직 정렬

가 나는 또한 (같은 http://codepen.io/chriscoyier/pen/oJeAK)를 인터넷에서 다른 주제를 확인하지만 아무것도 정말 내 요구를 일치하지 ... 나는 verticaly 아바타를 정렬하려고하지만 난 바로 그것을 얻을 수

여기 내 CSS 코드는 다음과 같습니다 http://jsfiddle.net/ev2wD/

모든 팁을 :

#author-sorter { 
    padding: 20px 30px; 
    margin-right: 2px; 
    width:900px; 
} 
#author-sorter > * { 
    vertical-align: middle; 
} 
#author-sorter ul li { 
    float: left; 
} 
#author-sorter ul li a { 
    width: 48px; 
    height:48px 
} 
#author-sorter ul li a:hover img, #author-sorter ul li.now a img { 
    border: 1px solid #bcd001; 
    width: 48px; 
} 
#author-sorter ul li.now { 
    position:relative; 
} 

내가 여기 라이브 버전을 만들어?

답변

3

여기 있습니다.

html로

WORKING DEMO

:

<div id="author-sorter"> 
    <div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"> 
     <div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"> 
      <ul class="pagination jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 902px; display:table-row;"> 
       <li class="now jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="width: 82px;" jcarouselindex="1"><a href="?author_id=43" id="43"><img width="46" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="Alterre Bourgogne" src="http://rare.lfdb.fr/files/2013/08/Alterre_logo.gif"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="2"><a href="?author_id=51" id="51"><img width="48" height="15" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARPE PACA" src="http://rare.lfdb.fr/files/2013/08/Logo_ARPE-PACA_2010_BD-150x49.jpg"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="3"><a href="?author_id=50" id="50"><img width="48" height="29" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="AREC Poitou-Charentes" src="http://rare.lfdb.fr/files/2013/08/AREC_logo-150x91.gif"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="4"><a href="?author_id=47" id="47"><img width="48" height="38" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="AREHN" src="http://rare.lfdb.fr/files/2013/08/Arehn_logo.gif"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-5 jcarousel-item-5-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="5"><a href="?author_id=48" id="48"><img width="48" height="32" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARENE Ile-de-France" src="http://rare.lfdb.fr/files/2013/08/ARENE_logo2009-150x102.gif"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-6 jcarousel-item-6-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="6"><a href="?author_id=52" id="52"><img width="48" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARER" src="http://rare.lfdb.fr/files/2013/08/Logo-arer-150x150.jpg"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-7 jcarousel-item-7-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="7"><a href="?author_id=44" id="44"><img width="48" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="ARPE Midi-Pyrénées" src="http://rare.lfdb.fr/files/2013/08/ARPE_logosimple-150x150.jpg"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-8 jcarousel-item-8-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="8"><a href="?author_id=49" id="49"><img width="48" height="31" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="CERDD" src="http://rare.lfdb.fr/files/2013/08/CERDD_Logo2004.jpg"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-9 jcarousel-item-9-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="9"><a href="?author_id=46" id="46"><img width="31" height="48" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="OEC" src="http://rare.lfdb.fr/files/2013/08/OEC-98x150.jpeg"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-10 jcarousel-item-10-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="10"><a href="?author_id=53" id="53"><img width="48" height="24" class="wp-user-avatar wp-user-avatar-48 alignhttp://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="RAEE" src="http://rare.lfdb.fr/files/2013/08/RAEE_logo.jpg"><span class="arrow"></span></a> 

       </li> 
       <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-11 jcarousel-item-11-horizontal" style="float: left; list-style: none outside none; width: 82px;" jcarouselindex="11"><a href="?author_id=45" id="45"><img width="48" height="27" class="wp-user-avatar wp-user-avatar-48 alignhttp://1.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=48 avatar avatar avatar-48 photo" alt="RARE" src="http://rare.lfdb.fr/files/2013/08/LogoRARE-e1377163403654.png"><span class="arrow"></span></a> 

       </li> 
      </ul> 
     </div> 
     <div class="jcarousel-prev jcarousel-prev-horizontal" style="display: block;"></div> 
     <div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div> 
    </div> 
</div> 

CSS의 :이 도움이

#author-sorter { 
    padding: 20px 30px; 
    margin-right: 2px; 
    width:900px; 
} 
#author-sorter > * { 
    vertical-align: middle; 
} 
#author-sorter ul li { 
    float: left; 
} 
#author-sorter ul li a { 
    width: 48px; 
    height:48px; 
    display: table-cell; 
vertical-align: middle; 
} 
#author-sorter ul li a:hover img, #author-sorter ul li.now a img { 
    border: 1px solid #bcd001; 
    width: 48px; 
} 
#author-sorter ul li.now { 
    position:relative; 
    vertical-align: middle; 
display: table-cell; 
} 

희망.

+0

니스! 나는 실제로 테이블 셀 디스플레이에 익숙하지 않다 :) – Xavier

+0

당신은 환영합니다 :) 나는 약간의 변화를 가지고 나의 대답을 바꾸었다. 당신은 확인할 수 있습니다. - @x_vi_r – Nitesh