Question

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

代码大约是10个房间。 Room 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定位，则没有更简洁的方法可以为top不同的n指定不同的div。

很抱歉，你只需将所有内容写成完全，就像你拥有它一样。自己做完之后，我想我的东西比你的略短。

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

Live Demo

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

我不确定你为什么使用顶级属性，它们都绝对定位了吗？

Answer 4

首先，我建议给“空间”div s一个公共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：{{1} }

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

然后您可以与同一行上的时分元素进行交互，而不会影响其他房间行。

我怎样才能重构一些重复的HTML和CSS？

5 个答案: