我已附上我的问题的 html 和屏幕截图。我有一个 DIV 容器(带 ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer 的 DIV)并且在容器内我有 2 个 DIV(一个用于左列 TITLE (DIV ID=dvTitles)，另一个对于右侧列 MONTH (DIV ID=dvMilestones)。TITLE 列宽度将始终是静态的(即 135px，在 DIV 内的 TD 上设置)。右侧 div 将动态增长(即以显示 MAY、JUNE、JULY 月份)。
请注意，我在 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>
最佳答案
你的代码是正确的，当 dvMilestones 中的表增长时，dvMilestones 显示一个滚动条(我测试过，把 width="800" 在表中，然后出现滚动条)。
你肯定没有用长宽度测试它。
希望这对您有所帮助。干杯
关于jquery - 如何获取父DIV宽度和设置子DIV宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6565345/