[英]How to get parent DIV width and set child DIV width
我附上了 html 和我的问题的屏幕截图。 我有一个 DIV 容器( ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer
的 DIV),在容器内我有 2 个 DIV(一个用于左列 TITLE(DIV ID=dvTitles
),另一个用于右列 MONTH(DIV ID=dvMilestones
)。列宽将始终为 static(即 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"
放入表格中,并且滚动出现)。
当然你没有用长宽度测试它。
希望这可以帮助。 干杯
感谢您提供的提示。 我最终使用了左侧的表格,并用 DIV 将表格包裹在右侧,使其可在 x 轴上滚动。 我最终使用 jquery 来相应地设置宽度。 我可能没有提供有关我的问题的足够详细信息。
再次感谢...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.