2011-07-03 205 views
0

我已附加html和我的問題的屏幕截圖。我有一個DIV容器(DIV ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer),容器內部有2個DIV(一個用於左列TITLE(DIV ID=dvTitles),另一個用於右列MONTH(DIV ID=dvMilestones)。TITLE列的寬度始終是靜態的(即135px,在DIV裏面設置一個TD),右邊div會動態增長(即顯示5月,6月,7月)如何獲得父DIV寬度並設置子DIV寬度

注意:我已經在2個div上浮動了,設置爲自動在右邊的div。父div有一個設置寬度。我需要內部右div包括一個水平滾動條時,已達到最大寬度。

我不知道如何設置寬度和在什麼div讓這個工作。最外面的div是我需要的寬度(我相信)。 DIV id=WebPartctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d

我希望這是有道理的。感謝您提供的任何幫助。不知道我是否可以用CSS或jQuery來做到這一切。

<div WebPartID="a788a965-7ee3-414f-bff9-2a561f8ca37d" HasPers="false" id="WebPartctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d" width="100%" class="ms-WPBody ms-wpContentDivSpace" allowDelete="false" allowExport="false" style="" > 
<div id="ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d">    
    <script type="text/javascript" src="/_layouts/js/jquery.scrollTo-min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
     $("#dvMilestones").scrollTo($(".scrollTo").index());  
     }); 
    </script> 
    <div id="ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer" class="milestoneTracker">       
     <div id="dvTitles" style="float:left"> 
      <table border="0" cellpadding="0" cellspacing="0"> 
       <tr> 
        <td style="vertical-align:top; width:135px;">         
         <table border="1" cellpadding="0" cellspacing="0" width="100%">     
          <tr>              
           <td style="border:0">Title</td>        
          </tr> 
          <tr><td style="border:0">&nbsp;</td></tr> 
          <tr class="rowOdd">       
           <td style="border:0"> 
            <a onfocus="OnLink(this)" href="http://amc/_layouts/listform.aspx?PageType=4&amp;ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&amp;ID=59&amp;ContentTypeID=0x0102004D5169009FA72B4287B37C512D83E740" onclick="EditLink2(this,ctx.ctxId);return false;" target="_self">Lou Milestone Event 1</a>        
           </td>      
          </tr>             
          <tr class="rowEven">       
           <td style="border:0"> 
            <a onfocus="OnLink(this)" href="http://amc/_layouts/listform.aspx?PageType=4&amp;ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&amp;ID=60&amp;ContentTypeID=0x0102004D5169009FA72B4287B37C512D83E740" onclick="EditLink2(this,ctx.ctxId);return false;" target="_self">Lou Milestone Event 2</a>        
           </td>      
          </tr>             
          <tr class="rowOdd">       
           <td style="border:0"> 
            <a onfocus="OnLink(this)" href="http://amc/_layouts/listform.aspx?PageType=4&amp;ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&amp;ID=61&amp;ContentTypeID=0x0102004D5169009FA72B4287B37C512D83E740" onclick="EditLink2(this,ctx.ctxId);return false;" target="_self">Lou Milestone Event 3</a>        
           </td>      
          </tr>             
          <tr class="rowEven">       
           <td style="border:0"> 
            <a onfocus="OnLink(this)" href="http://amc/_layouts/listform.aspx?PageType=4&amp;ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&amp;ID=62&amp;ContentTypeID=0x0102004D5169009FA72B4287B37C512D83E740" onclick="EditLink2(this,ctx.ctxId);return false;" target="_self">Lou Milestone Event 4</a>        
           </td>      
          </tr>             
          <tr class="rowOdd">       
           <td style="border:0"> 
            <a onfocus="OnLink(this)" href="http://amc/_layouts/listform.aspx?PageType=4&amp;ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&amp;ID=63&amp;ContentTypeID=0x0102004D5169009FA72B4287B37C512D83E740" onclick="EditLink2(this,ctx.ctxId);return false;" target="_self">Lou Milestone Event 5</a>        
           </td>      
          </tr>             
          <tr class="rowEven">       
           <td style="border:0"> 
            <a onfocus="OnLink(this)" href="http://amc/_layouts/listform.aspx?PageType=4&amp;ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&amp;ID=64&amp;ContentTypeID=0x0102004D5169009FA72B4287B37C512D83E740" onclick="EditLink2(this,ctx.ctxId);return false;" target="_self">Lou Milestone Event 6</a>        
           </td>      
          </tr>             
         </table>        
        </td>  
       </tr> 
      </table> 
     </div> 
     <div id="dvMilestones" style="float:left; overflow:auto; width:450px;"> 
      <table cellpadding="0" cellspacing="0"> 
       <tr>       
        <td style="vertical-align:top;"> 
         <table border="1" cellpadding="0" cellspacing="0" width="175px">   
          <tr>   
           <td id="ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_rptMilestoneDate_ctl00_monthTD" style="border:0" align="center" colspan="5"> 
            May&nbsp;2011           
            <tr>                         
             <td align="center" >1</td>              
             <td align="center" >8</td>              
             <td align="center" >15</td> 
             <td align="center" >22</td>              
             <td align="center" >29</td>                        
            </tr>                         
            <tr class="rowOdd">               
             <td align="center" style="width:100px!important; border:0">&nbsp;                               
              <img src="/_layouts/images/GaryDiamond.jpg" />                
              <img src="/_layouts/images/CheckMark.jpg" />                                                    
             </td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                                       
            </tr>                                       
            <tr class="rowEven">               
             <td align="center" style="width:100px!important; border:0">&nbsp;                                                                 
              <img src="/_layouts/images/CheckMark.jpg" />                                                     
              <img src="/_layouts/images/GaryDiamond.jpg" /> 
             </td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                                       
            </tr>                                       
            <tr class="rowOdd">               
             <td align="center" style="width:100px!important; border:0">&nbsp;             
              <img src="/_layouts/images/CheckMark.jpg" />                                  
              <img src="/_layouts/images/GaryDiamond.jpg" />                
             </td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                                       
            </tr>                                       
            <tr class="rowEven"> 
             <td align="center" style="width:100px!important; border:0">&nbsp;             
              <img src="/_layouts/images/CheckMark.jpg" />                                  
              <img src="/_layouts/images/GaryDiamond.jpg" />                
             </td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                                       
            </tr>                                       
            <tr class="rowOdd">               
             <td align="center" style="width:100px!important; border:0">&nbsp;             
              <img src="/_layouts/images/CheckMark.jpg" />                                  
              <img src="/_layouts/images/GaryDiamond.jpg" />                
             </td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                             
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                                       
            </tr>                                       
            <tr class="rowEven"> 
             <td align="center" style="width:100px!important; border:0">&nbsp;             
              <img src="/_layouts/images/CheckMark.jpg" />                                  
              <img src="/_layouts/images/GaryDiamond.jpg" />                
             </td>              
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>              
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>              
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>              
             <td align="center" style="width:100px!important; border:0">&nbsp;</td>                                       
            </tr>                                 
           </td>      
          </tr>   
         </table> 
        </td>          
       </tr> 
      </table> 
     </div> 
    </div> 
</div> 

+1

您可以在jQuery中使用'width()'獲取元素的寬度。 – Niklas

回答

0

感謝您提供的提示。我最終在左邊使用了一張桌子,並在右邊用DIV包裹了我的桌子,使它可以在X軸上滾動。我結束了使用jQuery來相應地設置寬度。我可能沒有提供足夠的關於我的問題的細節。

再次感謝...

0

你的代碼是正確的,裏面的時候dvMilestones表的增長,dvMilestones顯示滾動(我測試了,把width="800"在表中,並出現滾動)。

當然,你沒有測試它的長寬。

希望這會有所幫助。乾杯