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

Question

是否有可能擁有不同職位的CSS div？例如，我有一個經常使用的div風格，而且每次我想要一個不同的位置時都會創建另一個id。是否可以在HTML中指定div的位置？

謝謝。

Answer 1

您可以在代碼中指定一個風格的行內：

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

我一般儘量避免這一點，雖然。如果所有風格都在一個地方，維護代碼會更容易。

Answer 2

我不確定我的理解是否正確，但您可以將多個類分配給元素，並且可以指定css內聯。結合這些技術，您可以非常方便地改變位置。

Answer 3

如果我正確理解你的問題，你可以使用一個類而不是ID：

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

.something { whatever: whatever } 

Answer 4

你不能有相同的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 5

可以傳遞多個類到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 6

儘量不要使用內聯樣式。 爲了便於閱讀和維護，您想要將html與樣式分開。

將額外的類添加到div中。

HTML

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

CSS

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

第二行僅駁回的背景。所以邊框是從風格類繼承的