我有一種情況，我必須制作一些看起來像代碼編輯器的東西，為了實作這一點，我必須在沒有任何庫的情況下使用 HTML、CSS 和 Js。
除了行號之外，我幾乎完成了所有作業，但我不知道該怎么做。
到目前為止，我已經實作了這一點：
這實際上是我的目標：
假設我有這個 html 結構：
<html>
<head>
</head>
<body>
<div class="lines"></div>
<div class="code"></div>
</body>
</html>
如何在使用 CSS 或 JavaScriptlines時根據內容的高度進行填充？code
uj5u.com熱心網友回復：
這里有一些東西：（寫得很快，隨意調整 CSS 等）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<style>
#code {
line-height: 15px;
}
.holder {
display: flex
}
</style>
</head>
<body>
<div class="holder">
<div>
<pre id="lines">
</pre>
</div>
<div>
<pre id="code">
.aaa {
bbb
}
.ccc {
ddd
}
</pre>
</div>
</div>
</body>
<script>
const codeHeight = document.getElementById('code').offsetHeight;
const lines = Math.ceil(codeHeight / 15);
let html = '';
for (i = 1; i < lines; i ) {
html = i '<br>'
}
document.getElementById('lines').innerHTML = html;
</script>
</html>
這是 JS 小提琴：https : //jsfiddle.net/4aowc26f/
計算中的數字 15 是由于 15px 行高。隨意為此引入變數。
uj5u.com熱心網友回復：
你應該把每一行作為一個 div
<div><span>{line}</span> <span>some code</span> </div>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/419625.html
標籤：
上一篇：HTTP管道和AWSELB