수직 정렬 tableless

Question

나는 3 열 필드를 가지고 처음 2 열은 설명이고 마지막 열은 이미지입니다. 이미지의 높이에 따라 설명을 수직으로 정렬하는 방법이 있습니까? 이미지의 높이가 다양하기 때문에 선 높이를 지정할 수 없습니다. 현재 테이블을 사용하면 문제가 없습니다. 하지만 내가 원하는 것은 div 또는 li을 사용하는 것입니다.

모든 의견을 크게 기뻐할 것입니다. 미리 감사드립니다.

Answer 1

Javascript를 약간 사용하면 줄의 DIV를 높이로 정렬 할 수 있습니다. 여기에 당신을 도울 수있는 jQuery 플러그인이 있습니다 :

http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 2

수직 테이블없이 중심으로하는 것은 까다 롭습니다,하지만 몇 가지 해결 방법은 당신이 그들을 사용할 수 있는지, 거기 :

http://www.student.oulu.fi/~laurirai/www/css/middle/ http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

을

Answer 3

나는이 에 대해 $(document).ready() 함수에서 일부 자바 스크립트 코드를 사용할 수 있다고 생각합니다. 먼저 모든 요소 (2 개의 설명 div와 하나의 이미지 div)에 ID를 사용해야합니다.

<div id="desc1"><!-- some content --></div> 
<div id="desc2"><!-- some content --></div> 
<div id="image"><!-- some image --></div> 

자바 스크립트가 있어야한다 : 그 후, 당신은 HTML 예제가 귀하의 설명 div의 모두의 폭이 값을 설정 한 다음 ID로 이미지를 획득하고 폭 속성을 검색하고 몇 가지 자바 스크립트 코드를 작성할 수 있습니다 이 같은 :

$(document).ready(function(){ 
    var width = $('#image')[0].attribute['width']; 
    $('#desc1')[0].setAttribute('width',width); 
    $('#desc2')[0].setAttribute('width',width); 
}); 

그런데, 당신은 모두 설명 된 div에 대한 특별하고 동일한 이름을 사용하고 $(document).getElementsByName('some_name') 방법을 호출하여 검색 한 후 루프를 사용할 수 있습니다.)