亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

而是包含浮動 HTML 元素，如何將行號添加到 div 以使其看起來像 IDE 編輯器？

而是包含浮動 HTML 元素，如何將行號添加到 div 以使其看起來像 IDE 編輯器？

慕哥9229398 2022-01-13 16:06:09
我正在嘗試為 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>
查看完整描述

2 回答

?
慕森王

TA貢獻1777條經驗 獲得超3個贊

我認為在不知道您希望它看起來如何的情況下給出答案有點困難。截圖會有所幫助。但是我假設您只需要每個 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;

}


查看完整回答
反對 回復 2022-01-13
?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

我評論中的 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>


查看完整回答
反對 回復 2022-01-13
  • 2 回答
  • 0 關注
  • 245 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號