[英]How to get parent DIV width and set child DIV width
I have attached html and a screenshot of my question.我附上了 html 和我的问题的屏幕截图。 I have a DIV container (DIV with
ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer
) and inside the container I have 2 DIVs (one for the left column TITLE (DIV ID=dvTitles
) and the other for the right column MONTH (DIV ID=dvMilestones
). The TITLE column width will always be static (ie 135px, which is set on a TD inside the DIV). The right div will grow dynamically (ie to show MAY, JUNE, JULY months).我有一个 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 月份)。
Notice I have float left on the 2 divs and I have overflow set to auto on the right div.请注意,我在 2 个 div 上向左浮动,并且在右侧 div 上将溢出设置为自动。 The parent div has a set width.
父 div 有一个固定的宽度。 I need the interior right div to include a horizontal scroll bar when the max width has been reached.
当达到最大宽度时,我需要内部右侧 div 包含一个水平滚动条。
I am not sure how to set the width and on what div to get this to work.我不确定如何设置宽度以及在哪个 div 上使其工作。 The outer most div is the width I need (I believe).
最外面的 div 是我需要的宽度(我相信)。 DIV
id=WebPartctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d
DIV
id=WebPartctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d
I hope that makes sense.我希望这是有道理的。 Thanks for any help provided.
感谢您提供的任何帮助。 Not sure if I can do this all with css or jquery.
不确定我是否可以使用 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>
Your code is right, when the table inside dvMilestones
grows, the dvMilestones
shows a scroll (I tested it, putting width="800"
in the table, and the scroll appears).您的代码是正确的,当
dvMilestones
内的表格增长时, dvMilestones
显示一个滚动(我对其进行了测试,将width="800"
放入表格中,并且滚动出现)。
Surely you didn't test it with a long width.当然你没有用长宽度测试它。
Hope this helps.希望这可以帮助。 Cheers
干杯
Thanks for the tips provided.感谢您提供的提示。 I ended up using a table on the left side and wrapped my table on the right side with a DIV to make it scrollable on the x axis.
我最终使用了左侧的表格,并用 DIV 将表格包裹在右侧,使其可在 x 轴上滚动。 I ended up using jquery to set widths accordingly.
我最终使用 jquery 来相应地设置宽度。 I probably did not provide enough detail about my problem.
我可能没有提供有关我的问题的足够详细信息。
Thanks again...再次感谢...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.