我已附加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"> </td></tr>
<tr class="rowOdd">
<td style="border:0">
<a onfocus="OnLink(this)" href="http://amc/_layouts/listform.aspx?PageType=4&ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&ID=59&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&ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&ID=60&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&ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&ID=61&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&ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&ID=62&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&ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&ID=63&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&ListId=134d94b6-a11c-4f5c-9ee2-3595cf8f5707&ID=64&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 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">
<img src="/_layouts/images/GaryDiamond.jpg" />
<img src="/_layouts/images/CheckMark.jpg" />
</td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
</tr>
<tr class="rowEven">
<td align="center" style="width:100px!important; border:0">
<img src="/_layouts/images/CheckMark.jpg" />
<img src="/_layouts/images/GaryDiamond.jpg" />
</td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
</tr>
<tr class="rowOdd">
<td align="center" style="width:100px!important; border:0">
<img src="/_layouts/images/CheckMark.jpg" />
<img src="/_layouts/images/GaryDiamond.jpg" />
</td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
</tr>
<tr class="rowEven">
<td align="center" style="width:100px!important; border:0">
<img src="/_layouts/images/CheckMark.jpg" />
<img src="/_layouts/images/GaryDiamond.jpg" />
</td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
</tr>
<tr class="rowOdd">
<td align="center" style="width:100px!important; border:0">
<img src="/_layouts/images/CheckMark.jpg" />
<img src="/_layouts/images/GaryDiamond.jpg" />
</td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
</tr>
<tr class="rowEven">
<td align="center" style="width:100px!important; border:0">
<img src="/_layouts/images/CheckMark.jpg" />
<img src="/_layouts/images/GaryDiamond.jpg" />
</td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
<td align="center" style="width:100px!important; border:0"> </td>
</tr>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
您可以在jQuery中使用'width()'獲取元素的寬度。 – Niklas