如何重构一些重复的 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

如果您需要相对/绝对定位，则没有更简洁的方法来为n不同的top指定不同的top div。

抱歉，您只需完全写出所有内容，就像您的方式一样。我自己做了这个之后，我想我的东西比你的稍微短一些。

---

作为参考，如果我需要定位，我会这样做：

现场演示< /em>

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

每个房间仍然会堆叠，因为它们自然地在块显示下，使每个房间高 40 像素将获得与使用绝对定位并声明每个 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

首先，我建议为“房间” div 提供一个通用 css 属性的类：

或者，如果它们都在一个公共父元素中，请使用它来分配公共 css 属性：

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

#allrooms div {
  ...
}

如果您不希望所有 div 都有该 css 规则列表，那么它可能值得考虑将 left 属性直接应用于 div：

Room 1

< /代码>

Answer 5

最好使用 div 来包装整行，然后...所以你有一个
<代码>

房间 1

在此输入时间划分元素

CSS

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

那么你就可以与同一行的时分元素进行交互，而不会影响其他房间行。