Javascript 具有相同类名且相互重叠的两个div

单击一个按钮，我的程序将创建一个动态的

div

，其类名为

dynamictextbox

。在这个

div

中有一个

标签

，它的类名为

mytxt

，文本框的类名为

mytext

，也是动态创建的

创建新的动态

div

时，它与先前创建的

div

重叠

下面是我使用的CSS

.dynamictextbox{
宽度：50%；
位置：相对位置；
填充：10；
}
.dynamictextbox.mytxt{
位置：绝对位置；
左：0px；
右：50%；
}
.dynamictextbox.mytext{
位置：绝对位置；
左：51%；
右：100%；
}

下面是HTML代码

输入您的姓名


现在这是一个很长的文本，将与下一部分重叠。需要解决这个问题。请给我一个解决办法


动态标签

更新下面的代码。这就是你要去的地方吗

$（“#添加”）。在（“单击”，函数（）{
//只是一些随机内容的辅助函数
函数dynamicText（）{
var min=1；
var max=50；
var random=Math.floor（Math.random（）*max）+min；
var text=“”；
对于（变量i=0；i
.dynamictextbox{
宽度：50%；
填充：10；
边缘顶部：10px；
背景：#CCC；
溢出：自动；
}
.dynamictextbox.mytxt{
位置：相对位置；
浮动：左；
宽度：计算（50%-10px）；
}
.dynamictextbox.mytext{
浮动：对；
宽度：计算（50%-10px）；
高度：自动；
}

单击一个按钮，我的程序将创建一个类名为dynamictextbox的动态div。在这个div中有一个类名为mytxt的标签和一个类名为mytext的文本框，这个div也是动态创建的。



添加


这可能会有帮助-

只需从CSS中删除.mytxt类，并增加.mytext类的left属性

.dynamictextbox .mytext{
position:absolute;
left:60%;
right:100%;
}

这里需要的是根据内容高度展开元素。不幸的是，您不能使用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>

因此输出将如下所示

另外，为了测试目的，我在类
dynamictextbox
中添加了边框。
嗨，亨利，我添加了我的html代码。你是否使用Ajax调用获取动态数据？我真的不明白你的问题。是否要修复div重叠？只需简单删除位置：绝对：）下面是我的示例@Ghanshyam singh是的，我使用ajax@PhucTai Le我希望标签向左浮动，文本框位于dynamic div.的右侧。。当标签上的文字较长时，它会与下一个div重叠。谢谢你的建议，但是当标签上的文字较长而不是一个单字动态时，它会与下一个div重叠，这是一个有趣的答案，但当标签上的文字较长时，它会位于文本框后面。在这种情况下，我希望将标签文本拆分为下一行。
<script>setHeight()</script>