而是包含浮动 HTML 元素，如何将行号添加到 div 以使其看起来像 IDE 编辑器？

Question

我正在尝试为 div 中的每一行添加一个行号。但我的 div 主体只是使用 js 生成并注入到该 div 的其他 HTML 元素的浮动组合。我知道，如果我想将行号添加到包含文本或固定元素的 div，我可以这样做。但是如何为浮动元素做到这一点。

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

我认为在不知道您希望它看起来如何的情况下给出答案有点困难。截图会有所帮助。但是我假设您只需要每个 div 旁边的任何文本，即使它们是浮动的，为此您只需添加以下 CSS：#field {&nbsp; /* Set "my-sec-counter" to 0 */&nbsp; counter-reset: my-sec-counter;}#field div::before {&nbsp; /* Increment "my-sec-counter" by 1 */&nbsp; counter-increment: my-sec-counter;&nbsp; content: "Section " counter(my-sec-counter) ". ";&nbsp; float:left;}#field div {&nbsp; &nbsp; font-size: 1rem;}var field = document.getElementById('field');function randomIntFromInterval(min, max) { // min and max included&nbsp;&nbsp; return Math.floor(Math.random() * (max - min + 1) + min);}for (var i = 0; i < 100; i++) {&nbsp; &nbsp; var element = document.createElement('div');&nbsp; &nbsp; if(randomIntFromInterval(1, 3) == 1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.classList.add("child_1_div");&nbsp; &nbsp; else if(randomIntFromInterval(1, 3) == 2)&nbsp; &nbsp; &nbsp; &nbsp; element.classList.add("child_2_div");&nbsp; &nbsp; else if(randomIntFromInterval(1, 3) == 3)&nbsp; &nbsp; &nbsp; &nbsp; element.classList.add("child_3_div");&nbsp; &nbsp; field.appendChild(element);}.parent_div{&nbsp; &nbsp; width: 500px;&nbsp; &nbsp; height: 500px;&nbsp; &nbsp; font-size: 0;&nbsp; &nbsp; border: 1px solid #FF0000;}.child_1_div{&nbsp; &nbsp; font-size: 1rem;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 30%;&nbsp; &nbsp; height:20px;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; border: 1px solid #000;}.child_2_div{&nbsp; &nbsp; font-size: 1rem;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 10%;&nbsp; &nbsp; height: 10px;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; border: 1px solid #000;}.child_3_div{&nbsp; &nbsp; font-size: 1rem;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 5%;&nbsp; &nbsp; height: 5px;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; border: 1px solid #000;}#field {&nbsp; /* Set "my-sec-counter" to 0 */&nbsp; counter-reset: my-sec-counter;}#field div::before {&nbsp; /* Increment "my-sec-counter" by 1 */&nbsp; counter-increment: my-sec-counter;&nbsp; content: "Section " counter(my-sec-counter) ". ";&nbsp; float:left;}#field div {&nbsp; &nbsp; font-size: 1rem;}<div id ="field" class="parent_div"></div>阅读评论后，您似乎需要打开代码编辑器时的行号。为此，您需要创建一个新的 div。将该 div 浮动到左侧，使其始终位于您的#field div 旁边。然后在新的 div 中添加向左浮动的数字并清除向左浮动的数字，以便每个数字都在下一行。像这样的东西：<div id="lineNumbers">&nbsp; <span>1</span>&nbsp; <span>2</span>&nbsp; <span>3</span></div>#lineNumbers {&nbsp; width: 20px;&nbsp; float:left;&nbsp; border:1px solid green;}#lineNumbers span {&nbsp; display:inline-block;&nbsp; float:left;&nbsp; clear:both;}

Answer 2

我评论中的 jQuery 示例您可以检查容器内每个元素的左侧位置，如果它等于 0，则添加一个类以生成伪元素。CSS 计数器可以在该类上使用和递增。尝试使用 jquery 的示例。function testme() {&nbsp; $('#field.parent_div').children().each(function() {&nbsp; &nbsp; var $currentElement = $(this);&nbsp; &nbsp; if ($currentElement.position().left === 0) {&nbsp; &nbsp; &nbsp; $currentElement.addClass(" lines")&nbsp; &nbsp; }&nbsp; });}var field = document.getElementById("field");function randomIntFromInterval(min, max) {&nbsp; // min and max included&nbsp; return Math.floor(Math.random() * (max - min + 1) + min);}for (var i = 0; i < 100; i++) {&nbsp; var element = document.createElement("div");&nbsp; element.classList.add("child_div");// you mist a few&nbsp;&nbsp; if (randomIntFromInterval(1, 3) == 1)&nbsp; &nbsp; element.classList.add("child_1_div");&nbsp; else if (randomIntFromInterval(1, 3) == 2)&nbsp; &nbsp; element.classList.add("child_2_div");&nbsp; else if (randomIntFromInterval(1, 3) == 3)&nbsp; &nbsp; element.classList.add("child_3_div");&nbsp; field.appendChild(element);}.parent_div {&nbsp; counter-reset: line;}.parent_div div.lines {&nbsp; counter-increment: line;&nbsp; /* see me */&nbsp; background: lightblue;}.parent_div .lines::before {&nbsp; content: counter(line);&nbsp; position: absolute;&nbsp; right: 100%;&nbsp; margin-right: 0.5em;&nbsp; background: yellow;}.parent_div {&nbsp; width: 500px;&nbsp; height: 500px;&nbsp; font-size: 0;&nbsp; border: 1px solid #ff0000;&nbsp; position: relative;&nbsp; margin-left: 2rem;}.child_div {&nbsp; display: inline-block;&nbsp; width: 2rem;&nbsp; height: 1rem;&nbsp; font-size: 1rem;&nbsp; border: solid 1px;}.child_1_div {&nbsp; font-size: 1rem;&nbsp; display: inline-block;&nbsp; width: 30%;&nbsp; height: 20px;&nbsp; box-sizing: border-box;&nbsp; border: 1px solid #000;}.child_2_div {&nbsp; font-size: 1rem;&nbsp; display: inline-block;&nbsp; width: 10%;&nbsp; height: 15px;&nbsp; box-sizing: border-box;&nbsp; border: 1px solid #000;}.child_3_div {&nbsp; font-size: 1rem;&nbsp; display: inline-block;&nbsp; width: 5%;&nbsp; height: 25px;&nbsp; box-sizing: border-box;&nbsp; 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>