如果该div不包含文本，而是包含浮动HTML元素，如何在div中添加行号以使其看起来像IDE编辑器？

Question

I am trying to add a line number for each line in a div. But my div body is just a floating combination of other HTML elements that are generated using js and injected to that div. I know that if I want to add line numbers to a div that contains a text or fixed with elements I can do this . but How to do that for floating elements.

 var field = document.getElementById('field'); function randomIntFromInterval(min, max) { // min and max included return Math.floor(Math.random() * (max - min + 1) + min); } for (var i = 0; i < 100; i++) { var element = document.createElement('div'); if(randomIntFromInterval(1, 3) == 1) element.classList.add("child_1_div"); else if(randomIntFromInterval(1, 3) == 2) element.classList.add("child_2_div"); else if(randomIntFromInterval(1, 3) == 3) element.classList.add("child_3_div"); field.appendChild(element); } 

 .parent_div { width: 500px; height: 500px; font-size: 0; border: 1px solid #FF0000; } .child_1_div { font-size: 1rem; display: inline-block; width: 30%; height:20px; box-sizing: border-box; border: 1px solid #000; } .child_2_div { font-size: 1rem; display: inline-block; width: 10%; height: 10px; box-sizing: border-box; border: 1px solid #000; } .child_3_div { font-size: 1rem; display: inline-block; width: 5%; height: 5px; box-sizing: border-box; border: 1px solid #000; } 

 <div id ="field" class="parent_div"></div> 

Answer 1

I think it's a little difficult to give an answer not knowing how you want it to look. A screenshot would have helped. However I assume you just want any text beside each of the divs even if they are floated, to do that you would simply add this CSS:

#field {
  /* Set "my-sec-counter" to 0 */
  counter-reset: my-sec-counter;
}

#field div::before {
  /* Increment "my-sec-counter" by 1 */
  counter-increment: my-sec-counter;
  content: "Section " counter(my-sec-counter) ". ";
  float:left;
}
#field div {
    font-size: 1rem;
}

 var field = document.getElementById('field'); function randomIntFromInterval(min, max) { // min and max included return Math.floor(Math.random() * (max - min + 1) + min); } for (var i = 0; i < 100; i++) { var element = document.createElement('div'); if(randomIntFromInterval(1, 3) == 1) element.classList.add("child_1_div"); else if(randomIntFromInterval(1, 3) == 2) element.classList.add("child_2_div"); else if(randomIntFromInterval(1, 3) == 3) element.classList.add("child_3_div"); field.appendChild(element); } 

 .parent_div { width: 500px; height: 500px; font-size: 0; border: 1px solid #FF0000; } .child_1_div { font-size: 1rem; display: inline-block; width: 30%; height:20px; box-sizing: border-box; border: 1px solid #000; } .child_2_div { font-size: 1rem; display: inline-block; width: 10%; height: 10px; box-sizing: border-box; border: 1px solid #000; } .child_3_div { font-size: 1rem; display: inline-block; width: 5%; height: 5px; box-sizing: border-box; border: 1px solid #000; } #field { /* Set "my-sec-counter" to 0 */ counter-reset: my-sec-counter; } #field div::before { /* Increment "my-sec-counter" by 1 */ counter-increment: my-sec-counter; content: "Section " counter(my-sec-counter) ". "; float:left; } #field div { font-size: 1rem; } 

 <div id ="field" class="parent_div"></div> 

Upon reading the comments it seems you need line numbers as in when you open a code editor. To do that you would need to create a new div. Float that div to the left so that it is always beside your #field div. Then in the new div add numbers which are floated left and clear float left so that each number is on the next line. Something like this:

<div id="lineNumbers">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
#lineNumbers {
  width: 20px;
  float:left;
  border:1px solid green;
}
#lineNumbers span {
  display:inline-block;
  float:left;
  clear:both;
}

Answer 2

example with jQuery from my comment

you could check each element left position inside the container , if it is eqaul to 0, then add a class to generate a pseudo elemnt. CSS counter can be used and incremented on that class.

example trying with jquery.

 function testme() { $('#field.parent_div').children().each(function() { var $currentElement = $(this); if ($currentElement.position().left === 0) { $currentElement.addClass(" lines") } }); } var field = document.getElementById("field"); function randomIntFromInterval(min, max) { // min and max included return Math.floor(Math.random() * (max - min + 1) + min); } for (var i = 0; i < 100; i++) { var element = document.createElement("div"); element.classList.add("child_div");// you mist a few if (randomIntFromInterval(1, 3) == 1) element.classList.add("child_1_div"); else if (randomIntFromInterval(1, 3) == 2) element.classList.add("child_2_div"); else if (randomIntFromInterval(1, 3) == 3) element.classList.add("child_3_div"); field.appendChild(element); } 

 .parent_div { counter-reset: line; } .parent_div div.lines { counter-increment: line; /* see me */ background: lightblue; } .parent_div .lines::before { content: counter(line); position: absolute; right: 100%; margin-right: 0.5em; background: yellow; } .parent_div { width: 500px; height: 500px; font-size: 0; border: 1px solid #ff0000; position: relative; margin-left: 2rem; } .child_div { display: inline-block; width: 2rem; height: 1rem; font-size: 1rem; border: solid 1px; } .child_1_div { font-size: 1rem; display: inline-block; width: 30%; height: 20px; box-sizing: border-box; border: 1px solid #000; } .child_2_div { font-size: 1rem; display: inline-block; width: 10%; height: 15px; box-sizing: border-box; border: 1px solid #000; } .child_3_div { font-size: 1rem; display: inline-block; width: 5%; height: 25px; box-sizing: border-box; border: 1px solid #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="testme();">show line numbers</button> <div id="field" class="parent_div"></div>