如何重构一些重复的HTML和CSS？

Question

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

代码约为10个房间。 房间i的顶部为40 * i像素。

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

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}

Answer 1

如果您需要relative / absolute位置，则没有更干净的方法为n不同的div指定不同的top 。

抱歉，但是您只需将所有内容写得与您的使用方式 完全 相似即可。 我自己做完这些之后，我想我要比您要矮一些。

---

供参考，这是我需要定位时的处理方法：

现场演示

CSS：

#roomContainer {
    position: relative
}
#roomContainer div {
    position: absolute;
    background: #ccc;
    width: 100px;
    height: 16px;
    padding: 10px;
    text-align: center;
    outline: 1px solid blue
}

#room1  { top: 0px    }
#room2  { top: 40px    }
#room3  { top: 80px    }
#room99 { top: 9120px  }

HTML：

<div id="roomContainer">
    <div id="room1">Room 1</div>
    <div id="room2">Room 2</div>
    <div id="room3">Room 3</div>
</div>

Answer 2

这是否必须处于绝对位置？ 为什么不这样做呢？

<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;
}

每个房间仍然会像在方块显示中一样自然堆叠，使每个40px高将获得与使用绝对定位并声明每个div顶部相同的效果。

Answer 3

给每个相同的类，并使每个类正确分开，例如：

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

CSS：

.room {
   margin-top: 40px
}

我不确定您为什么使用top属性，它们是否都位于绝对位置？

Answer 4

首先，我建议给“ room” div也提供一个用于公共css属性的类： <div id="room1" class="room"></div>或如果它们都在一个公共父元素中使用它来分配通用的CSS属性：

<div id="allrooms">
  <div id="room1">Room 1</div>
  <div id="room2">Room 2</div>
</div>

#allrooms div {
  ...
}

如果您不希望该列表包含所有div的css规则，则可能值得考虑将left属性直接应用于div ： <div style="left: 20px">Room 1</div>

Answer 5

最好使用div而不是包装整个行，然后...所以
<div class="schedulerRow"> <div id="room1" class="room">room 1</div> <div id="scheduler1">Enter Time division elements in here</div> </div>

CSS .schedulerRow, room { height: 40px;}

那么您可以与同一行中的时分元素进行交互，而不会影响其他会议室行。