我有以下两个来自我正在搞乱的网站的代码摘录。我正在尝试对线条进行更改,但我正在努力做到这一点。这个想法是有以下几点:
“Javascript”
4年以上
“HTML”
3年以上
依此类推,但没有在年份和编程语言之间添加行距,换句话说,每种编程语言之间只有行距。我曾想过使用 pre 标签,但这只会让它变得更糟。
编辑:请尝试提供一个不需要 20 个列 div/包装器的解决方案,或者会弄乱列的定位。谢谢!
HTML:
<div class="column" id="column1">
<h2>Programming Languages</h2>
Java 4+ yrs <br>
SQL - 2+ yrs <br>
JavaScript - 2 yrs <br>
<h2>Tools</h2>
</div>
<div class="column" id="column2">
Python - 2 yrs <br>
C# - 1+ yrs <br>
C++ - 1 yr <br>
</div>
<div class="column" id="column3">
HTML ~ 1 yr <br>
CSS ~ 1 yr <br>
Bash ~ 1 yr
</div>
CSS:
.column{
position: absolute;
color: white;
font-size: 16px;
line-height: 60px;
}
#column1{
margin-top: 100px;
left: 300px;
}
#column2{
margin-top: 100px;
left: 600px;
}
#column3{
margin-top: 100px;
left: 900px;
}