同一个div在不同的位置？ （CSS）

Question

是否可以使用不同位置的CSS div？例如，我有一个经常使用的div样式，每次我想要一个不同的位置时，创建另一个id似乎过多。是否可以在HTML中指定div的位置？

谢谢。

Answer 1

您可以将多个类传递给DIV。创建一个具有所有默认属性的类。然后创建几个其他类，将DIV定位在您想要的位置。

.defaults
{
   properties...
}
.position1
{
   top: 0;
   left: 100px;
}
.position2
{
  top 100px;
  left: 0;
}

<div class="defaults position1"></div>
<div class="defaults position2"></div>

Answer 2

您不能拥有多个具有相同ID的元素。不是通过ID定义位置，而是使用公共属性的类和仅特定于特定元素的属性的ID：

.positionDiv {
    width: 400px;
    height: 200px;
 }
 #div1 {
    left: 20px;
 }
 #dev2 {
    left: 40px;
 }

 <div class='positionDiv' id='div1'>first div</div>
 <div class='positionDiv' id='div2'>second div</div>

Answer 3

如果我正确理解您的问题，您可以使用类而不是ID：

<div class="something">...</div>

.something { whatever: whatever }

Answer 4

我不确定我是否正确理解了您的问题，但您可以为元素分配多个类，并且可以指定css内联。通过这些技术的组合，您可以非常方便地改变位置。

Answer 5

尽可能尝试不使用内联样式。 您希望将html与样式分开以实现可读性和可维护性

为div添加额外的类。

HTML

<div class="styled">
</div>
<div class="styled otherclass">
</div>

CSS

.styled { background: red; border: 1px solid blue; }
.otherclass { background: green }

第二行仅否决了背景。所以边框继承自样式类

Answer 6

您可以在代码中指定内联样式：

<div style="left:10px;top:20px;">

但是，我通常会尽量避免这种情况。如果所有样式都在一个地方，那么维护代码会更容易。