이미지를 기준으로 한 상대 div 높이

Question

두 개의 열이 있습니다. 왼쪽에는 배경색이 있고 오른쪽은 이미지입니다.

전체 예 : http://jsfiddle.net/kvFG4/

여기 기본 구조입니다 : 내가 왼쪽 열에서 텍스트가 오른쪽 열에하지만 내가 얻을 수 있었던 유일한 방법은 유연 싶습니다

<div class="container"> 
    <table style="height:auto;"> 
     <tbody> 
      <tr> 
       <td align="center" style="width:35.7143%"> 
        <div data-cycle-fx="fade" data-cycle-timeout="5000" data-cycle-speed="2000" data-cycle-slides="li" class="squareMarketingText cycle-slideshow squareMarginTop" id="dnn_squareMarketingTextPane" style="position: relative; height: 548px;"> 
         <li style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;" class="cycle-slide cycle-sentinel"> 
          <div class="squareOrange" style="visibility: hidden;"> 
           <span class="center marketingText" style="visibility: hidden;"> 
     CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO 
     </span> 
          </div> 
         </li> 

           </div> 
           <div class="clear"></div> 
          </div> 
         </div> 
         <li style="position: absolute; top: 0px; left: 0px; z-index: 97; opacity: 0; display: block; visibility: hidden;" class="cycle-slide"> 
          <div class="squareOrange"> 
           <span class="center marketingText"> 
     CREATING WHAT YOUR BUSINESS NEEDS, TO GO WHERE YOUR BUSINESS NEEDS TO GO 
     </span> 
          </div> 
         </li> 
        </div> 
       </td> 
       <td style="width:64.2857%"> 
        <img class="plc-logo" src="http://newsite.plcellc.com/Portals/_default/Skins/PLC//images/AllSquares.png"> 
       </td> 
      </tr> 
     </tbody> 
    </table> 

</div> 

가 작동하도록이 자바 스크립트로했다 :

setTimeout(function() { 
      $(".squareMarketingText").css({ 'height': ($(".plc-logo").height() + 'px') }); 
     }, 500); 

왼쪽 열이 단지 .CSS와 크기를 잘 할 수있는 멀리 있습니까? 당신은 <div> 태그 안에 <li>을 사용하는

Answer 1

는 .... 리 태그는 항상 <ul> 또는 <ol> 태그 내에 있어야합니다.

코드의 나머지 부분은 정상입니다. Check the Demo

나는 인라인 CSS의 높이를 제거 UL &에 DIV를 돌았 다.