单击按钮时,我的程序将创建一个动态 div
类名 dynamictextbox
。在这个 div
中有一个带有类名 mytxt
的 label
和带有类名 mytext
的文本框,它也是动态的已创建。
当我创建一个新的动态 div
时,它与之前创建的 div
重叠。
下面是我用过的CSS
.dynamictextbox{
width:50%;
position:relative;
padding:10;
}
.dynamictextbox .mytxt{
position:absolute;
left:0px;
right:50%;
}
.dynamictextbox .mytext{
position:absolute;
left:51%;
right:100%;
}
下面是HTML代码
<div id="Enter your name" class="dynamictextbox">
<label class="mytxt">Enter your name</label>
<input type="text" name="Enter your name_name" id="Enter your name_id" class="mytext">
</div>
<br />
<div id="bigData" class="dynamictextbox">
<label class="mytxt">Now this is a long text which will overlap the next div.Need solution for this. Please give me a solution for this</label>
<input type="text" name="bigData_name" id="bigDate_id" class="mytext">
</div>
<br />
<div id="div_temp" class="dynamictextbox">
<label id="txtlb" class="mytxt">Dynamic Label</label>
<input type="text" name="tb" id="tb" class="mytext">
</div>
<br />
最佳答案
这里你需要的是根据内容高度展开元素。不幸的是,您不能使用 CSS 来做到这一点。所以我们必须与 javascript 一起移动。
这是脚本
<script>
var max = 0;
function setHeight() {
var elements = document.getElementsByClassName('mytxt');
var height = 0;
for (var i = 0; i < elements.length; i++) {
height = elements[i].scrollHeight;
if (height > max) {
max = height;
}
}
elements = document.getElementsByClassName('dynamictextbox');
for (var i = 0; i < elements.length; i++) {
elements[i].style = "min-height: " + max + "px";
}
}
</script>
在所有 div
的末尾调用函数 setHeight()
。
<script>setHeight()</script>
附言我已将边框添加到类 dynamictextbox
以进行测试。
关于javascript - 具有相同类名的两个 div 相互重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43555310/