javascript - 具有相同类名的两个 div 相互重叠

标签 javascript jquery html css

单击按钮时,我的程序将创建一个动态 div 类名 dynamictextbox 。在这个 div 中有一个带有类名 mytxtlabel 和带有类名 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>

所以输出看起来像这样 html output

附言我已将边框添加到类 dynamictextbox 以进行测试。

关于javascript - 具有相同类名的两个 div 相互重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43555310/

相关文章:

javascript - CKEditor 4 的下拉工具栏按钮

javascript - canvas.getContext ('2d' );错误

javascript - 使用 AJAX XMLHttpRequest 时,Symfony StreamedResponse 的响应文本被连接起来

javascript - 如何缩放内容以保持比例

javascript - Safari 保存的密码覆盖表单中的自动完成 ="off"

javascript - 当输入值以编程方式更改时如何触发 JQuery 更改事件?

html - 如何在 Angular 中为整个应用程序使用样式 angular 4

php - 在 MYSQL 中搜索具有西类牙口音的圣经网站字符集

javascript - 编码方式: storing methods as object properties

javascript - 如何使用 Kendo Grid 组合行模板和详细信息模板