親DIVの幅を取得し、子のDIVの幅を設定する方法

私はhtmlと私の質問のスクリーンショットを添付しています。私はDIVコンテナ（ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainerのDIV）を持っていて、コンテナ内に2つのDIV（1つは左の列TITLE（DIV ID=dvTitles）、もう1つは右の列MONTH（DIV ID=dvMilestones）です。（すなわち、135pxはDIV内のTDに設定されています）。右のdivは動的に増加します（つまり、MAY、JUNE、JULY月を表示する）。親DIVの幅を取得し、子のDIVの幅を設定する方法

注意2 divに浮動小数点が残っています。右側のdivのautoに設定します。親divの幅が設定されています。最大幅に達したときに、内部のright 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>

出典

2011-07-03 obautista

jQueryでは 'width（）'を使用して要素の幅を取得できます。 – Niklas

ヒントを提供ありがとうございます。私は左側のテーブルを使用して終了し、x軸上にスクロール可能にするためにDIVで右側のテーブルをラップしました。私はそれに応じて幅を設定するjqueryを使用して終了しました。私はおそらく私の問題について十分な詳細を提供しなかったでしょう。

ありがとうございました...

出典

2011-07-04 20:05:35 obautista

あなたのコードの権利であるdvMilestones内部テーブルが大きくなると、dvMilestonesは（私がテーブルにwidth="800"を入れて、それをテストして、スクロールが表示されます）スクロールを示しています。

確かに、あなたは長い幅でテストしませんでした。

これが役に立ちます。乾杯

出典

2011-07-03 20:46:25

親DIVの幅を取得し、子のDIVの幅を設定する方法

答えて

関連する問題