如何重构一些重复的HTML和CSS？ [英] How can I refactor some repetitive HTML and CSS?

问题描述

如何重构以下重复的HTML和CSS？

How can I refactor the following repetitive HTML and CSS?

代码约有10个房间。房间顶部是40 * i像素。

The code is about 10 rooms. The top of Room i is at 40*i pixels.

我用冒号来表示我删除的行。

I used colons to indicate lines that I deleted.

HTML：

<div id="room1">Room 1</div>
<div id="room2">Room 2</div>
:
<div id="room10">Room 10</div>

CSS：

#room1,
#room2,
:
#room10
{
:
    top: 40px;
:
}

#room2 {top: 80px}
#room3 {top: 120px}
#room4 {top: 160px}
:
#room10 {top: 400px}

推荐答案

这必须在绝对定位吗？为什么不这样做？

Does this have to be in absolute positioning? Why not do this?

<div id="room1" class="roomHeight">Room 1</div>
<div id="room2" class="roomHeight">Room 2</div>
:
<div id="room10" class="roomHeight">Room 10</div>

.roomHeight {
    height: 40px;
}

每个房间都会自动堆叠， 40像素的高度将获得与使用绝对定位和声明每个div的顶部相同的效果。

Each room will still stack as they are naturally under block display, making each one 40px tall will get the same effect as using absolute positioning and declaring the top of each div.

这篇关于如何重构一些重复的HTML和CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！