javascript - 在窗口调整大小的时候,动态改变 div

  显示原文与译文双语对照的内容
0 0

在div元素中使用来自 .each()的代码,查找子元素,根据它的内容( 高级) 设置高度,但不处理页面加载,但请帮助你帮助?

$('#col-main> div').each(function () {
 var tmpHeight = 0;
 $(this).find("h2").each(function() {
 tmpHeight = $(this).height()> tmpHeight? $(this).height() : tmpHeight;
 });
 $(this).find("h2").height(tmpHeight);
});

在这里代码中添加工作代码,我得到高高的div ( 列)"。demographcont"连续一行("。框") 。 它适用于所有行。 on normal size

窗口未调整大小重置高度和高度将按内容来显示 window resize

页面刷新后的页面刷新 enter image description here

/* code for adding height to div as per content */
 function setHeight() {
 $('.box').each(function () {
 var tmpHeight = 0;
 $(this).find(".demographcont").each(function () {
 tmpHeight = $(this).height()> tmpHeight? $(this).height() : tmpHeight;
 });
 $(this).find(".demographcont").height(tmpHeight);
//alert(tmpHeight);
 });
 }
 $(document).ready(function () {
 setHeight();
 });
 $(window).resize(function () {
 setHeight();
 });

这里的Html代码

<div class="box clearfix">
 <div class="demographcont clearfix">
 <div class="grid_12">
 <div class="grid_5">
 <label>
 Date of Birth:</label>
 </div>
 <div class="grid_7">
 18/06/2013
 </div>
 </div>
 <div class="grid_12">
 <p>
 content1</p>
 </div>
 </div>
 <div class="demographcont">
 <div class="grid_12">
 <p>
 content1</p>
 <p>
 content1</p>
 <p>
 content1</p>
 <p>
 content1</p>
 </div>
 <div class="grid_12">
 <p>
 content1</p>
 <p>
 content1</p>
 <p>
 content1</p>
 <p>
 content1</p>
 </div>
 </div>
</div>

demographcont{ border:1px 实心 #006599; 填充:0 ;线条高度:20px ;}

时间:原作者:6个回答

0 0

好吧,这就是我从你的问题中得到的:

你想找到 div.demographcont 元素的最大高度,并为它的他元素的. After 页面加载这个值,我们将有一些类似的东西。

<div class="box clearfix">
 <div class="demographcont" style="height:304px">...</div>
 <div class="demographcont" style="height:304px">...</div>
</div>

现在重新调整窗口大小,但是我告诉过你,因为你已经经设置了相同的高度 inline.Otherwise 。

因此尝试添加自动高度属性,然后执行以下操作:

 function setHeight() {
 $('.box').each(function () {
 var tmpHeight = 0;
 $(this).find(".demographcont").each(function () {
 $(this).height('auto');
 tmpHeight = $(this).height()> tmpHeight? $(this).height() : tmpHeight;
 });
 $(this).find(".demographcont").height(tmpHeight);
//alert(tmpHeight);
 });
}
原作者:
...