행의 수를 기준으로 요소의 높이를 계산하십시오.

Question

내용에 따라 높이를 계산하는 요소가 있습니다 (ul). 현재 ul에는 각각 3 개의 항목이있는 2 개의 행이 있습니다. 다음 CSS를 사용하여 화면에 .element의 위치를 ​​설정하고 있습니다.

.element { 
position: absolute; 
left: 30px; 
top: -139px; 
} 

이의 마크 업은 향후

<div class="element"> 
    <ul> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
    </ul> 
</div> 

을 거기 것 같은 (I이 새 행을 숨 깁니다 사용하고있는 top 위치를 의미 ul에 세 번째 행을 추가 할 필요 요소 div는 다른 div의 꼭대기에 위치합니다.) 이것은 이상과는 거리가 멀습니다.

jQuery에서이 작업을 수행해야 할 필요가 있다고 생각합니다. 추가 된 행 수에 관계없이이 문제를 해결하기 위해 CSS를 변경할 필요가 없습니다. 나는이이

WIP jQuery를 훨씬 같습니다

var elemImgHeight = $('.element li img').height(); 
var toggles = $('.element li'); 
var numOfRows = math.ceil(toggles.length()/3); 
var elemTopOffset = numOfRows * elemImgHeight + 10; 

    if ($('.element li') => 7) { 
     $('.element').css({ top:elemTopOffset }) 
    } 

나는이에 바른 길에 나는 확실하지, 그래서 몇 가지 포인터와 함께 할 수 있을까? 사전에

감사합니다.

Answer 1

쉬운 ...의 당신이 HTML 구조가 있다고 가정 해 봅시다 :

<div class="element"> 
    <ul> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
     <li><img src="#" />Model</li> 
    </ul> 
</div>​​​​​​​ 

을하고 마지막 리튬 요소가 표시됩니다 있도록 상단 위치를 계산하려면 ... 이 사용 :

var theElement = $(".element"); 
var topPosition = theElement.find("ul li:last").outerHeight()-theElement.outerHeight(); 
theElement.css("top",topPosition); 

샘플은 여기에 있습니다 : http://jsfiddle.net/senegalo/eEya4/2/

XSLT는 회원의 의견 ..am 무엇 동료입니다 보자 어쨌든, 그림으로 올 줄 경우