而是包含浮动 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 {

  /* 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>

阅读评论后，您似乎需要打开代码编辑器时的行号。为此，您需要创建一个新的 div。将该 div 浮动到左侧，使其始终位于您的#field div 旁边。然后在新的 div 中添加向左浮动的数字并清除向左浮动的数字，以便每个数字都在下一行。像这样的东西：

<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

我评论中的 jQuery 示例

您可以检查容器内每个元素的左侧位置，如果它等于 0，则添加一个类以生成伪元素。CSS 计数器可以在该类上使用和递增。

尝试使用 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>