디스플레이를위한 자바 스크립트 해결 방법 : IE <= 7의 표 셀

Question

커뮤니티는 최근 IE의 초기 버전을 만들기 위해 몇 가지 훌륭한 도구를 제공했습니다. 다중 열 CSS 선택기와 같습니다. 불행히도 IE-7에서 조건부로로드 할 수있는 자바 스크립트를 찾을 수 없었습니다.이 스크립트는 display : table-cell를 사용하는 다중 열 레이아웃을 변환합니다.

누구든지 이러한 스크립트를 알고 있습니까?

<div id="sidebar"> 
    <ul id="main_nav"> 
     <li><a href="about_us.php">ABOUT US</a></li> 
    </ul> 
</div> <!--end of sidebar--> 

<div id="content"> 
    <div id="main_content"> 
    <h1>Header</h1> 
    <p>Page Content</p> 
    </div> <!--end of main_content--> 

    <div class="aside_info"> 
     <h2>Side Info</h2>   
    </div> 
</div> <!--end of content--> 

은 열입니다 #side_bar와 #content 3 열이 있고 #content 내 #main_content 및 #aside_info이있다. #aside_info div가 있지만 다른 두 개의 열이있는 페이지에는 3 열 레이아웃을 만드는 것이 좋습니다.

누구든지 역방향 브라우저 용 테이블로 변환 할 스크립트를 알고 있으면 감사하겠습니다.

감사합니다,

다니엘 그것은 jQuery를 아주 쉽게 사용하고

Answer 1

:이 도움이

$('<table><tr><td></td><td></td><td></td></tr></table>') 
    .find('td') 
     .eq(0) 
      .append($('#sidebar')) 
      .end() 
     .eq(1) 
      .append($('#main_content')) 
      .end() 
     .eq(2) 
      .append($('.aside_info')) 
      .end() 
     .end() 
    .appendTo($('#content')); 

희망!

Answer 2

나는이 문제에 대한 해결책을 찾았고, 내가 돌아 왔을 때 jimbojw가 훨씬 더 세련된 해결책을 제시했음을 알았다. 나는 그 단순성이 매우 매력적이기 때문에 그의 투표를하고있다. (자기 자신에 대한 참고 : 자세히 jQuery!). 이 응답하지 않습니다

<div id="sidebar"> 
    <ul id="main_nav"> 
     <li><a href="about_us.php">ABOUT US</a></li> 
    </ul> 
</div> <!--end of sidebar--> 

<div id="content"> 
    <div id="main_content"> 
    <h1>Header</h1> 
    <p>Page Content</p> 
    </div> <!--end of main_content--> 

    <div class="aside_info"> 
     <h2>Side Info</h2>   
    </div> 
</div> <!--end of content--> 

<script type="text/javascript"> 
    // Test for IE version 
    var ieversion = 0; 
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)){ // IE test adapted from http://www.javascriptkit.com/javatutors/navigator.shtml 
     ieversion = new Number(RegExp.$1) 
    } 

    if(ieversion > 0 && ieversion < 8) 
    { 
     // Find the existing DIV elements 
     var sidebarDiv = document.getElementById("sidebar"); 
     var mainContentDiv = document.getElementById("main_content"); 
     var contentDiv = document.getElementById("content"); 

     // Create the structure of the table that will replace them 
     var tableElement = document.createElement("table"); 
     var tbodyElement = document.createElement("tbody"); 
     var trElement = document.createElement("tr"); 
     var sidebarTd = document.createElement("td"); 
     sidebarTd.id = "sidebar"; 
     var mainContentTd = document.createElement("td"); 
     mainContentTd.id = "main_content"; 
     var asideInfoTd = document.createElement("td"); 

     // Clone the DIVs' child nodes and add the clones to the appropriate TDs. Then add the TDs to the TR. 
     for(var i=0;i<sidebarDiv.childNodes.length;i++) 
     { 
      sidebarTd.appendChild(sidebarDiv.childNodes[i].cloneNode(true)); 
     } 
     trElement.appendChild(sidebarTd); 

     for(var i=0;i<mainContentDiv.childNodes.length;i++) 
     { 
      mainContentTd.appendChild(mainContentDiv.childNodes[i].cloneNode(true)); 
     } 
     trElement.appendChild(mainContentTd); 
     mainContentDiv.parentNode.removeChild(mainContentDiv); 

     var contentChildDivs = contentDiv.getElementsByTagName("div"); 
     for(var i=0;i<contentChildDivs.length;i++) 
     { 
      if(contentChildDivs[i].className.indexOf("aside_info") > -1) 
      { 
       asideInfoTd.appendChild(contentChildDivs[i].cloneNode(true)); 
      } 
     } 
     // We only add the aside info if there were some (sometimes there aren't) 
     if(asideInfoTd.childNodes.length > 0) 
     { 
      trElement.appendChild(asideInfoTd); 
     } 

     // Finish putting the table together 
     tbodyElement.appendChild(trElement); 
     tableElement.appendChild(tbodyElement); 

     // Remove the existing content div and then replace the sidebar with the new table that contains all 2 or 3 columns. 
     contentDiv.parentNode.removeChild(contentDiv); 
     sidebarDiv.parentNode.replaceChild(tableElement, sidebarDiv); 
    } 
</script>