Question

点击按钮后，我的程序会创建一个名为div的动态dynamictextbox。在label中有一个mytxt类名mytext和类名为div的文本框，也是动态创建的。

当我创建新动态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 />

Answer 1

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

所以输出看起来像这样

P.S。我已为课程dynamictextbox添加了边框以进行测试。

Answer 2

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

＆＃13;

$("#add").on("click", function(){
  
  // just a helper function for some random content
  function dynamicText(){
    var min = 1;
    var max = 50;
    var random = Math.floor(Math.random() * max) + min;
    var text = "";
    for(var i = 0; i < random; i++){
      text += "text ";
    }
    return text;
  }

  // add to the container
  var addMe = "\
    <div class='dynamictextbox'>\
      <label class='mytxt'>"+dynamicText()+"</label>\
      <textarea class='mytext'>"+dynamicText()+"</textarea>\
    </div>\
  ";
  
  var container = $("#container");
  
  container.append(addMe);
});

＆＃13;

.dynamictextbox{
  width:50%;
  padding:10;
  margin-top: 10px;
  background: #CCC;
  overflow: auto;
}

.dynamictextbox .mytxt{
  position: relative;
  float: left;
  width: calc(50% - 10px);
}

.dynamictextbox .mytext{
  float: right;
  width: calc(50% - 10px);
  height: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

On clicking a button my program will create a dynamic div with a class name dynamictextbox . There is a label with the class name mytxt and textbox with class name mytext inside this div which is also dynamically created.

<br><hr><br>
<button id="add">ADD</button><br><br>

<div id="container"></div>

＆＃13;

Answer 3

这可能会有所帮助 - JSFIDDLE
只需从CSS中删除.mytxt类，然后增加.mytext类的左属性

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

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

3 个答案: